设置a:基于类的悬停

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>颜色，因为它有不同的颜色，不应该在悬停时改变。菜单div中的所有<a>标记都应该在悬停时更改颜色，只有当前类的颜色除外。

我如何使用CSS来实现它呢？

我试过

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

认为只有主导航项类才会在悬停时改变颜色，而不是当前的颜色。但这是行不通的。

Answer 1

试试这个：

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

为了理解这是如何工作的，重要的是要以浏览器的方式阅读它。a定义元素，.main-nav-item将元素限定为只有该类的元素，最后将psuedo类:hover应用于前面的限定表达式。

基本上可以归结为：

将此悬停规则应用于类main-nav-item的所有锚点元素，该类是类menu.

的子类。

Answer 2

级联在咬你。试试这个：

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

这段代码表示要抓取所有具有主导航项类并且是类菜单的子级的链接，并在它们悬停时应用颜色#DDD。

Answer 3

根据类设置a:悬停，您只需尝试：

a.main-nav-item:hover { }