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 类的a:hover标签设置此<a>颜色，而不是 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 将元素限定为仅包含该类的元素，最后将psuedo-class :hover应用于限定元素以前的表达。

基本上归结为：

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

Answer 2

级联正在咬你。试试这个：

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

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

Answer 3

设置一个：基于类的悬停，您可以尝试：

a.main-nav-item:hover { }

Answer 4

尝试

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

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

让我们说我们的代码中有一个锚标记，并且在主程序中调用了“ div”类。 a：悬停会执行此操作，将鼠标移到吸血鬼上时，背景会变成吸血鬼黑色，文本上会变成白色。

Answer 5

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

.menu a:hover .main-nav-item

它永远不会奏效。

因此，你不会写

.menu a .main-nav-item:hover

它将是

.menu a.main-nav-item:hover

Answer 6

怎么样？ .main-nav-item:hover

这使特异性保持低

Answer 7

我发现如果你添加一个 !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”帮助你记住它：链接 -> 访问 -> 悬停 -> 活动

设置：基于类的悬停

7 个答案: