悬停不填充区域/块的整个背景颜色

当将鼠标悬停在我的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

悬停不填充区域/块的整个背景颜色

回答

相关问题