基于类设置 a:hover

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

但是，我想仅为那些具有main-nav-item类而不是main-nav-item-current类的<a>标签设置a:hover颜色，因为它具有不同的颜色并且不应在悬停时更改。 menu div中的所有<a>标签在悬停时都应更改颜色，除了带有current类的标签。

我该如何使用CSS实现呢？

我尝试了一些方法：

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

认为只有带有main-nav-item类的元素在悬停时才会改变颜色，而当前元素不会。但是它没有起作用。

- anon355079

Answer 1

试试这个：

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

为了理解它的工作原理，重要的是像浏览器一样阅读它。 a 定义了元素，.main-nav-item 限定 该元素只适用于具有该类的元素，最后伪类:hover 应用于之前的限定表达式。

基本上可以归结为：

将此悬停规则应用于所有具有类main-nav-item的锚点元素，这些元素是具有类menu的任何元素的后代子元素。

- Andrew Hare

---

成功了！ :) 你能解释一下浏览器如何解释那个CSS选择器吗？用语言表达出来，这样我就知道逻辑了，对我写的其他CSS也有帮助... - anon355079

用语言描述，这个选择器是：“所有具有主要导航项类别的<a>标签，其祖先具有菜单类别，并处于悬停状态（即鼠标光标在其上方）”。 - Paul D. Waite

Answer 2

层叠样式表 (CSS) 对你造成了困扰。试试这个：

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

这段代码的意思是从class为menu的子元素中获取所有class为main-nav-item的链接，并在链接被悬停时应用#DDD颜色。

- Scott Radcliff

---

另一种方法。我也会尝试一下。谢谢 :) - anon355079

Answer 3

如果要基于类别设置a:hover，你可以尝试：

a.main-nav-item:hover { }

- Rizwan

Answer 4

尝试这个。

.div
{
text-decoration:none;
font-size:16;
display:block;
padding:14px;
}

.div a:hover
{
background-color:#080808;
color:white;
}

假设我们的代码中使用了锚点标签，并且在主程序中调用了class"div"。a:hover会起到作用，当鼠标移动到其上方时，它将使背景呈现吸血鬼般的黑色，文本呈现白色，这就是hover的含义。

- KNiF3

Answer 5

如何处理 .main-nav-item:hover ？

这将使特异性保持较低。

- Aleksej Dix

Answer 6

我发现如果你添加了!important，它会在之前无法运行时起作用。

    a.main-nav-item:link {
      color: blue !important; 
    }
    a.main-nav-item:visited {
      color: red !important; 
    }
    a.main-nav-item:hover {
      color: purple !important; 
    }
    a.main-nav-item:focus {
      color: green !important; 
    }
    a.main-nav-item:active {
      color: green !important; 
    }

另外，我在某处读到顺序很重要。助记口诀“LoVe HaTe”可以帮助你记住它：link（链接） -> visited（访问过的链接） -> hover（鼠标悬停） -> active（激活状态）

- Honeybear65

---

你是怎么发现在结尾加上!important可以强制添加hover颜色的呢？谢谢！这对我很有用。给你的答案点个赞。 - Joseph

Answer 7

一个常见的错误是在类名前面留有空格。即使这是正确的语法：

.menu a:hover .main-nav-item

这永远不会起作用。

因此，你不会写

.menu a .main-nav-item:hover

这将是

.menu a.main-nav-item:hover

- DanDan