悬停不填充区域/块的整个背景颜色
当将鼠标悬停在我的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>
你的问题是由图标引起的,解决它图标类添加到<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>
谢谢,这有帮助! – Robben
@罗本不客气!很高兴帮助你。 –
你有几个选项。可能最简单的是给它一些填充而不是使用行高,这将使它突出更多区域。
.sidebar-nav li {
text-indent: 20px;
padding-top: 15px;
padding-bottom: 15px;
}
谢谢,这确实有很大的帮助! – Robben
什么是“期望“地区?您正在应用背景的a元素悬停,而不是li – code4pi
您想要突出显示什么?我看起来很好。 –
@ code4pi我把它改成了li,它仍然没有突出显示整个块,我不知道为什么。 – Robben