在悬停时扩展背景颜色

Question

我在 SO 中搜索了很多问题，但 none 的答案很适合我的情况。

我有一个 col-md-2，其中有一个导航栏。我想在悬停时将背景颜色填充到“col-md-2”的边界。我可以改变颜色，但它不会延伸到边界。

我创建了一个示例 fiddle。

以防万一 fiddle 不起作用。

<div class="col-md-2">
    <ul>
        <li><a href="#">dfsdf</a></li>
        <li><a href="#">sdgfdgdfgdf</a></li>
        <li><a href="#">sdfdsfsd</a></li>
    </ul>
</div>
<div class="col-md-10">
    cycdc
</div>

Css

.col-md-2{
    background-color:red;    
}
.col-md-2>ul>li>a:hover{
    background-color:yellow;
}

更新

我明白我必须在a tag中添加一个display:block。但是当我在我的代码中应用相同的方法时，它并没有真正起作用。我将 post 我拥有的 css。

.col-md-2 .navbar-nav{
    background-color:ghostwhite;
}
.col-md-2 .navbar-nav >li{
    text-align: center;   
    display:block;
}
.col-md-2 .navbar-nav>ul>li>a{
    color:#255C89;
    display:block;
}
.col-md-2 .navbar-nav >li>a:hover{
    background-color:#255C89;
    color:white;
}

Html

<div class="col-md-2">
    <ul class="nav navbar-nav">
        <li>@Html.ActionLink("View System Families", "Index", "LsystemFamilies")</li>
        <li>@Html.ActionLink("Add New System Family", "Create", "Lsystemfamilies")</li>
        <li>@Html.ActionLink("View all Systems", "Index", "Lsystems")</li>
    </ul>
</div>

Answer 1

http://jsfiddle.net/frtjwqhp/1/

您只需将 display: block 添加到 a 标签

更新：

根据你的代码选择器是

.col-md-2 .navbar-nav > li > a
{
    display: block
}

upd2:

.col-md-2 .navbar-nav
{
    background-color:ghostwhite;
}
.col-md-2 .navbar-nav>li
{
    text-align: center;   
    display:block;
    float: none;
}
.col-md-2 .navbar-nav>li>a
{
    color:#255C89;
    display:block;
    float: none;
}
.col-md-2 .navbar-nav>li>a:hover
{
    background-color:#255C89;
    color:white;
}

Answer 2

这也行

.col-md-2{
    background-color:red;
    
}
.col-md-2>ul>li:hover{
    background-color:yellow;
}

<div class="col-md-2">
    <ul>
        <li><a href="#">dfsdf</a></li>
        <li><a href="#">sdgfdgdfgdf</a></li>
        <li><a href="#">sdfdsfsd</a></li>
    </ul>
</div>
<div class="col-md-10">
    cycdc
</div>

Answer 3

将 display:block; 添加到 a 有一个额外的好处，即整个区域在悬停时都可以点击，这将实现您的目标：

.col-md-2{
    background-color:red;
}
.col-md-2>ul>li>a{
    display:block;
}
.col-md-2>ul>li>a:hover{
    background-color:yellow;
}

Answer 4

你可以通过两种方式做到这一点：

第一名：

悬停 li 而不是 a

.col-md-2{
    background-color:red;
    
}
.col-md-2>ul>li:hover{
    background-color:yellow;
}

<div class="col-md-2">
    <ul>
        <li><a href="#">dfsdf</a></li>
        <li><a href="#">sdgfdgdfgdf</a></li>
        <li><a href="#">sdfdsfsd</a></li>
    </ul>
</div>

第二

将 display:block 设置为 a 因为默认设置为 default:inline

.col-md-2 {
  background-color: red;
}
.col-md-2>ul>li a:hover {
  background-color: yellow;
}
a {
  display: block
}

<div class="col-md-2">
  <ul>
    <li><a href="#">dfsdf</a>
    </li>
    <li><a href="#">sdgfdgdfgdf</a>
    </li>
    <li><a href="#">sdfdsfsd</a>
    </li>
  </ul>
</div>

根据你的评论，解决方案是一样的，检查你更新的代码：

第一名：

悬停 li 而不是 a

.col-md-2 .navbar-nav {
  background-color: ghostwhite;
  /*remove margin/padding from ul default if not already */
  margin: 0;
  padding: 0;
}
.col-md-2 .navbar-nav li {
  text-align: center;
  display: block;
}
.col-md-2 .navbar-nav>ul>li>a {
  color: #255C89;
  display: block;
}
.col-md-2 .navbar-nav>li>:hover {
  background-color: #255C89;
  color: white;
  display: block;
}

<div class="col-md-2">
  <ul class="navbar-nav">
    <li><a href="#">dfsdf</a>
    </li>
    <li><a href="#">sdgfdgdfgdf</a>
    </li>
    <li><a href="#">sdfdsfsd</a>
    </li>
  </ul>
</div>

第二名：

将 display:block 设置为 a 因为默认设置为 default:inline

.col-md-2 .navbar-nav {
  background-color: ghostwhite;
  /*remove margin/padding from ul default if not already */
  margin: 0;
  padding: 0;
}
.col-md-2 .navbar-nav li {
  text-align: center;
  display: block;
}
.col-md-2 .navbar-nav>ul>li>a {
  color: #255C89;
  display: block;
}
.col-md-2 .navbar-nav>li>a:hover {
  background-color: #255C89;
  color: white;
  display: block;
}

<div class="col-md-2">
  <ul class="navbar-nav">
    <li><a href="#">dfsdf</a>
    </li>
    <li><a href="#">sdgfdgdfgdf</a>
    </li>
    <li><a href="#">sdfdsfsd</a>
    </li>
  </ul>
</div>

在悬停时扩展背景颜色

Extending the Background color on Hover

html

css

hover

第一名：

第二

第一名：

第二名：