在悬停时扩展背景色

Question

我已经在SO中搜索了许多问题，但是没有一个答案适合我的情况。

我有一个col-md-2 ，我有一个导航栏。 我想在悬浮时将背景色填充到“ col-md-2”的边界。 我可以更改颜色，但不能一直扩展到边界。

我创建了一个样本小提琴 。

以防万一提琴不起作用。

<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 。 但是，当我在我的代码中应用相同的内容时，它实际上就无法工作。 我将发布我所拥有的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>