Question

我想在悬停时同时更改边框和链接的颜色。我尝试在border-bottom: 2px solid #000;上使用nav ul li a:hover，但问题是如果链接处于活动状态，即使在悬停时也会保持红色。

CSS：

nav ul li {
    display: inline-block;
    margin: 0 10px;
}
nav ul li a {
    color:red;
    text-decoration:none;
}
nav ul li a:hover {
    color: #000;
}
nav ul li a.active {
    border-bottom: 2px solid red;
}

HTML：

<nav>
    <ul>
        <li><a class="active" href="#">Home</a>
        </li>
        <li><a href="#">About</a>
        </li>
        <li><a href="#">Contact Us</a>
        </li>
    </ul>
</nav>

JSFiddle Demo

Answer 1

由于样式表的级联性质以及选择器共享相同specificity的事实，后者样式覆盖了它。您可以像这样更改选择器的顺序：

Updated Example

nav ul li a.active {
    border-bottom: 2px solid red;
}
nav ul li a:hover {
    color: #000;
    border-bottom: 2px solid #000;
}

或者，您也可以通过简单地删除元素类型nav ul li a.active - ＆gt;来减少a nav ul li .active。 {{1}}。 specificity

在悬停时更改边框和链接的颜色

1 个答案: