使用CSS的菜单项的透视焦点(灰色显示其他项并突出显示当前项)

Question

我有一个菜单列表如下：

<div id="menubar">
    <ul class="menulist">
        <li><a href="#">Home</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

我想做的是，最初，菜单项的字体颜色是深灰色。但当用户将鼠标悬停在任何菜单项上时，该菜单项将保持深灰色，但其余菜单项将变为浅灰色。

我有以下CSS。

    #menubar a {
        color: #202021;
        display: block;
        padding: 6px;
        text-decoration: none;
    }
    #menubar a:hover {
        display: block;
        padding: 6px;
        background-color: #97979B;
        border-radius: 3px;
        font-weight: bold;
    }
    #menubar .menulist:hover {
        color: #747478;
    }

但是.menulist:hover中给出的color不应用于悬停项以外的菜单项，而当我悬停在任何菜单项上时，color以外的属性应用于菜单项的其余。我遵循了这个SO问题，它有一些类似的要求。

如何使用纯CSS获得这种行为？

Answer 1

按如下方式更改两个选择器：

#menubar .menulist:hover  a {
    color: #747478;
}​
#menubar .menulist:hover a:hover {
    display: block;
    padding: 6px;
    background-color: #97979B;
    border-radius: 3px;
    font-weight: bold;
}

演示

---

第二选择器#menubar .menulist:hover a:hover:上的一个快速单词

通常，这只需要应用css，因为当a:hover:时不会更改锚点的颜色

#menubar .menulist:hover a {
    color: #747478;
}​
#menubar a:hover {
    ...
    /* no color change here */
}

如果您决定更改悬停的锚点的颜色，则不会应用它，因为选择器#menubar .menulist:hover a比#menubar a:hover 具有更高的特异性

示例

使第二个选择器#menubar .menulist:hover a:hover确保它比#menubar .menulist:hover a具有更高的特异性，并且规则正确地覆盖

示例

进一步阅读：

• CSS的特殊性和继承性
• CSS特殊性：你应该知道的事情