我正在嘗試在li側邊欄的元素上應用懸停屬性，它的作業但圖示標簽沒有顯示懸停效果。我希望圖示顯示懸停效果以及li懸停效果。下面是代碼：
.wrapper {
display: flex;
position: relative;
}
.wrapper .sidebar{
position: fixed;
width: 200px;
background-color: #00B6E1;
/* padding: 30px 0; */
height: 100%;
}
.wrapper .sidebar ul li{
padding: 15px;
border-bottom: 1px solid #064E88;
/* border-top: 1px solid; */
/* color: white; */
font-weight: 400;
}
.wrapper .sidebar ul li a{
padding: 10px;
}
.wrapper .sidebar ul li:hover{
background-color: #064E88;
color: white;
}<div class="wrapper">
<div class="sidebar">
<ul class="side">
<li><a href="#"> <i class="bi bi-columns-gap fa-lg icon-red"></i> </a>Dashboard</li>
<li><a href="#"> <i class="bi bi-graph-up-arrow"></i> </a>Reporting</li>
<li><a href="#"> <i class="bi bi-send-check"></i> </a>Sending</li>
<li><a href="#"> <i class="bi bi-envelope"></i> </a>Recieving</li>
<li><a href="#"> <i class="bi bi-person-check"></i> </a>Verification</li>
</ul>
</div>
</div>uj5u.com熱心網友回復：
您可以簡單地為每個標簽提供一個額外的類，<i>并使用選擇器將其參考到 CSS li:hover。（我給了圖示）
<div class="wrapper">
<div class="sidebar">
<ul class="side">
<li><a href="#"> <i class="bi bi-columns-gap fa-lg icon-red icon"></i></a>Dashboard</li> <!-- Extra class 'icon'-->
<li><a href="#"> <i class="bi bi-graph-up-arrow icon"></i> </a>Reporting</li>
<li><a href="#"> <i class="bi bi-send-check icon"></i> </a>Sending</li>
<li><a href="#"> <i class="bi bi-envelope icon"></i> </a>Recieving</li>
<li><a href="#"> <i class="bi bi-person-check icon"></i> </a>Verification</li>
</ul>
</div>
</div>
/*Referring the class 'icon' with 'li:hover'*/
.wrapper .sidebar ul li:hover, li:hover .icon{
background-color: #064E88;
color: white;
}
li:hover .icon整體表示懸停的“li”標簽內具有“icon”類的元素。我們需要用 ' li:hover' 分隔它，以便效果顯示在懸停的 li 和<i>標簽上。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/520409.html
標籤：htmlcss引导程序 4
上一篇：Onclick只執行一次函式
下一篇：更改文本懸停時選單的顏色