设置:基于类的悬停

Question

我有以下HTML:

<div class="menu">
    <a class="main-nav-item" href="home">home</a>
    <a class="main-nav-item-current" href="business">business</a>
    <a class="main-nav-item" href="about-me">about me</a>
</div>

在CSS中,我想将a:hover这些菜单项设置为特定颜色.所以我写道:

.menu a:hover
{
    color:#DDD;
}

但是,我想a:hover仅为<a>具有类main-nav-item而不是main-nav-item-current的标签设置此颜色,因为它具有不同的颜色,并且在悬停时不应更改.菜单 div中的所有<a>标记都应在悬停时更改颜色,但当前类的标记除外.

我怎么能用CSS做呢？

我试过类似的东西

.menu a:hover .main-nav-item
{
    color:#DDD;
}

认为只有具有main-nav-item类的那些将在悬停时改变颜色,而不是当前的颜色.但它没有用.

Answer 1

试试这个:

.menu a.main-nav-item:hover { }

为了理解其工作原理,以浏览器的方式阅读这一点非​​常重要.该a定义元件,所述.main-nav-item 认证了的元件仅那些具有类,最后是伪类:hover被施加到到来之前的合格表达.

基本上它归结为:

将此悬停规则应用于具有类的所有锚元素,该类main-nav-item是具有该类的任何元素的后代子元素menu.

Answer 2

级联正在咬你.试试这个:

.menu > .main-nav-item:hover
    {
        color:#DDD;
    }

此代码表示抓取所有具有main-nav-item类的链接并且是类菜单的子项,并在它们悬停时应用颜色#DDD.

Answer 3

设置 a:hover 基于类，您可以简单地尝试：

a.main-nav-item:hover { }