美好的一天, 我创建了一个带有各种链接的导航栏,我想使用悬停效果让它在悬停时改变颜色。问题是效果只是围绕单词而不是导航栏的高度到水平规则。我希望悬停效果达到水平规则。
这是我的代码:
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>
&#13;
答案 0 :(得分:2)
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;
}
&#13;
<nav>
<ul>
<li>
<a>Home</a>
</li><li>
<a>History</a>
</li><li>
<a>Gallery</a>
</li><li>
<a>Techniques</a>
</li>
</ul>
</nav>
&#13;
答案 1 :(得分:1)
CSS选择器仅突出显示单词,因为a
是目标。如果您使用a
更改li
,则会突出显示li
的整个区域。
Repalce:
#NavBar ul li a:hover{
background-color: yellow;
}
使用:
#NavBar ul li:hover{
background-color: yellow;
}
答案 2 :(得分:0)
试试这个
li:hover {
background-color: yellow;
}