在悬停上扩展背景颜色

Question

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

我有一个col-md-2，我有一个导航栏。我想填充背景颜色，直到'col-md-2＆＃39;的边界。当盘旋时我能够改变颜色，但它不会延伸到边界。

我创建了一个示例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;
}

更新

我知道我必须在display:block中添加a tag。但是当我在我的代码中应用相同的内容时，它并没有真正起作用。我将发布我正在使用的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代码

即可

<强> UPD：

根据您的代码选择器是

.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

这也行

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>

2ST：

将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>