導航欄高度的CSS懸停效果

Question

好日子全部， 我已經創建了一個帶有各種鏈接的導航欄，我想使用懸停效果讓它在懸停時改變顏色。問題是，效果只是圍繞單詞而不是導航欄的高度到水平線的規則。我希望懸停效果達到水平線的規則。

這裏是我的代碼：

ul{ 
 
    list-style-type: none;  
 
} 
 

 
li{ 
 
    display:inline; 
 
    padding-right: 50px; 
 
} 
 

 
#NavBar ul li a{ 
 
    display: inline-block; 
 
    text-decoration: none; 
 
    cursor: pointer;  
 
} 
 

 
#NavBar ul li a:hover{ 
 
background-color: yellow; 
 
}

<hr> 
 
<nav id="NavBar"> 
 
    <ul> 
 
    <li><a>Home</a></li> 
 
    <li><a>History</a></li> 
 
    <li><a>Gallery</a></li> 
 
    <li><a>Techniques</a></li> 
 
    </ul>  
 
</nav> 
 
<hr>

Answer 1

nav ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    border: solid silver; 
 
    border-width: 1px 0; 
 
    text-align: center; 
 
} 
 

 
nav li{ 
 
    display: inline-block; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
nav a { 
 
    display: block; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
    padding: 1em; 
 
} 
 

 
nav a:hover { 
 
    background-color: yellow; 
 
}

<nav> 
 
    <ul> 
 
    <li> 
 
     <a>Home</a> 
 
    </li><li> 
 
     <a>History</a> 
 
    </li><li> 
 
     <a>Gallery</a> 
 
    </li><li> 
 
     <a>Techniques</a> 
 
    </li> 
 
    </ul>  
 
</nav>

Answer 2

CSS選擇既突出了話，因爲a的目標。如果您將a更改爲li，則會突出顯示li的整個區域。

Repalce：

#NavBar ul li a:hover{ 
background-color: yellow; 
} 

有了：

#NavBar ul li:hover{ 
background-color: yellow; 
} 

Answer 3

試試這個

li:hover { 

background-color: yellow; 
}