懸停不填充區域/塊的整個背景顏色

當將鼠標懸停在我的li元素上時，背景不會突出顯示整個所需區域，而只會突出顯示小/窄部分。我如何獲得背景顏色來突出顯示整個元素塊？懸停不填充區域/塊的整個背景顏色

這裏是我的CSS：

.sidebar-nav { 
    padding: 5px; 
    padding-top: 35px; 
    list-style: none; 
} 

.sidebar-nav li { 
    text-indent: 20px; 
    line-height: 40px; 
} 

.sidebar-nav li a { 
    display: block; 
    text-decoration: none; 
    color: #ddd; 
    margin: 25px 0; 
} 

.sidebar-nav li a:hover { 
    background: #16A085; 
}

這裏是我的HTML：

<div id="sidebar-wrapper"> 
    <ul class="sidebar-nav"> 
     <li><a href="#" class="glyphicon glyphicon-home"><span>Home</span></a></li> 
     <li><a href="#" class="glyphicon glyphicon-user"><span>About</span></a></li> 
     <li><a href="#" class="glyphicon glyphicon-cloud"><span>Portfolio</span></a></li> 
     <li><a href="#" class="glyphicon glyphicon-pencil"><span>Misc</span></a></li> 
    </ul> 
</div>

來源

2016-05-15 Robben

什麼是「期望「地區？您正在應用背景的a元素懸停，而不是li – code4pi

您想要突出顯示什麼？我看起來很好。 –

@ code4pi我把它改成了li，它仍然沒有突出顯示整個塊，我不知道爲什麼。 – Robben

你的問題是由圖標引起的，解決它圖標類添加到<span>標籤，而不是<a>標籤，就像這樣：

.sidebar-nav { 
 
    padding: 5px; 
 
    padding-top: 35px; 
 
    list-style: none; 
 
} 
 

 
.sidebar-nav li { 
 
    text-indent: 20px; 
 
    line-height: 40px; 
 
} 
 

 
.sidebar-nav li a { 
 
    display: block; 
 
    text-decoration: none; 
 
    color: #ddd; 
 
    margin: 25px 0; 
 
} 
 

 
.sidebar-nav li a:hover { 
 
    background: #16A085; 
 
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<div id="sidebar-wrapper"> 
 
    <ul class="sidebar-nav"> 
 
     <li><a href="#" ><span class="glyphicon glyphicon-home"> Home</span></a></li> 
 
     <li><a href="#" ><span class="glyphicon glyphicon-user"> About</span></a></li> 
 
     <li><a href="#" ><span class="glyphicon glyphicon-cloud"> Portfolio</span></a></li> 
 
     <li><a href="#" ><span class="glyphicon glyphicon-pencil"> Misc</span></a></li> 
 
    </ul> 
 
</div>

來源

2016-05-15 23:38:14

謝謝，這有幫助！ – Robben

@羅本不客氣！很高興幫助你。 –

你有幾個選項。可能最簡單的是給它一些填充而不是使用行高，這將使它突出更多區域。

.sidebar-nav li { 
    text-indent: 20px; 
    padding-top: 15px; 
    padding-bottom: 15px; 
}

來源

2016-05-15 23:29:59

謝謝，這確實有很大的幫助！ – Robben

懸停不填充區域/塊的整個背景顏色

回答

相關問題