HTML
<!-- start nav here -->
<nav>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Our History</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li>
<aa href="#">Contact Us</a>
</li>
</ul>
</nav>
<!-- end nav here -->
CSS
header nav li {
background-color: #CECDC0;
font-size: 20px;
font: Noteworthy;
color: blue;
float: left;
margin: 10px;
margin-top: -2px;
}
header nav {
display: block;
float: right;
line-height: -30px;
}
header nav li a:hover {
color: red;
}
当我像上面的例子一样添加悬停效果时,它使导航栏中的所有文本悬停。我希望“关于我们”具有不同的悬停背景颜色和字体颜色。如何编辑 html 或 css?
最佳答案
这个更干净,因为父元素应该早于子元素。
nav {
display: block;
}
nav li{
display: inline-block;
float: left;
margin: 10px;
margin-top: -2px;
}
nav li a{
background-color: #CECDC0;
font-size: 20px;
font: Noteworthy;
color: blue;
padding:5px 2px;
line-height: 30px;
text-decoration:none;
}
nav li:first-child a:hover {
color: #fff;
background-color: gold;
}
nav li a:hover {
color: red;
}
<nav>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Our History</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
关于html - 悬停时如何更改标题导航栏链接中单个文本项的颜色和背景颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36096898/