Question

希望了解如何将单个导航链接更改为具有与其他导航链接不同的背景悬停颜色。

我尝试#nav＃contact.hover和#nav #contact：hover无效。

<div id="nav">
    <ul>
        <li id="home"><a href="#">Home</a></li>
        <li id="service"><a href="#">Service</a></li>
        <li id="parts"><a href="#">Parts</a></li>
        <li id="contact"><a href="#">Contact</a></li>
    </ul>
    <div class="clearall"></div>
</div>
</html>

CSS:

.clearall {
    clear:both;
}
#nav {
    background:#333;
}
#nav ul li {
    float:left;
    margin-right:0px;
}
#nav ul li a {
    color:#fff;
    text-transform:uppercase;
    padding:10px 20px;
    display:block;
    text-decoration:none;
}


#nav ul li a:hover {
    background-color:black;
}



Should change the contact element in the nav to have a background hover color of white

Answer 1

只需正确选择选择器即可。我认为您遇到了问题，因为悬停的基本样式过于具体，胜过大多数替代。

#nav ul li:hover a

...可以轻松地更改为更容易覆盖的更简单的选择器，使用ID代替类也增加了特异性问题。

.clearall {
    clear:both;
}
#nav {
    background:#333;
}
#nav ul li {
    float:left;
    margin-right:0px;
}
#nav ul li a {
    color:#fff;
    text-transform:uppercase;
    padding:10px 20px;
    display:block;
    text-decoration:none;
}
#nav ul li:hover a {
    background-color:black;
}
#nav ul li#contact:hover a {
  background: url('https://picsum.photos/100');
}

<div id="nav">
    <ul>
        <li id="home"><a href="#">Home</a></li>
        <li id="service"><a href="#">Service</a></li>
        <li id="parts"><a href="#">Parts</a></li>
        <li id="contact"><a href="#">Contact</a></li>
    </ul>
    <div class="clearall"></div>
</div>

Answer 2

您可以通过在CSS中使用:last-child伪类来完成此操作。

这是一个带有修复程序的codepen，但是我将在下面描述我所做的事情：https://codepen.io/Athys/pen/WBdYdZ

我将:last-child添加到了li选择器中，因为“联系人”链接显示为最后一个列表项（最后一个li）。然后，我向选择器添加了一个:hover伪类，并为它提供了与其他a元素不同的悬停颜色和文本颜色。希望这可以帮助。

单个导航链接的特定背景

2 个答案: