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;
    }

但color中给出的.menulist:hover不会应用于悬停项目以外的菜单项，而color以外的属性会应用于菜单的 rest 我悬停在任何菜单项上的项目。我跟着this提出了类似要求的问题。

如何使用纯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;
}

<强> 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的菜单项的透视焦点（灰色其他项目和突出显示当前）

1 个答案: