在懸停時擴展背景色

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>