具有 CSS 的菜单项的透视焦点（将其他项变灰并突出显示当前项）

Posted 2023-05-08

【中文标题】具有 CSS 的菜单项的透视焦点（将其他项变灰并突出显示当前项）

【英文标题】：Perspective focus (grey out other items and highlight current) for menu items with CSS

【发布时间】：2012-03-24 16:35:30

【问题描述】：

我有一个如下的菜单列表：

<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 以外的属性将应用于菜单项的 rest菜单项。我关注了this SO question，它有一些类似的要求。

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

【参考方案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;

DEMO

---

关于第二个选择器#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 具有更高的特异性

Example

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

Example

进一步阅读：

CSS Specificity And Inheritance CSS Specificity: Things You Should Know

【讨论】：

非常感谢！ #menubar .menulist:hover a:hover 对我来说很新。

我已经添加了一些解释来解释为什么第二个选择器。