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

Question

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

Answer 1

你有几个选择。可能最简单的是给它一些填充而不是使用行高，这会使它突出更多区域。

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

Answer 2

您的问题是由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>