html - 悬停不会填充区域/ block 的整个背景颜色

Question

当鼠标悬停在我的 li 元素上时，背景不会突出显示整个所需区域，相反，它只会突出显示一小部分/窄部分。如何获得背景颜色以突出显示整个元素 block ？

这是我的 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>

Answer 1

您的问题是由 glyphicon 引起的图标，修复它添加 glyphicon图标类 <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>