设置：基于类的hover [英] Set a:hover based on class

问题描述

我有以下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 将这些菜单项设置为特定的颜色。所以我写：

In CSS, I want to set the a:hover for these menu items to a particular color. So I write:

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

但是，我想设置 a：hover c> main-nav-item-current ，因为它有不同的颜色，不应该在悬停时改变。 div 类别下的所有< a>

But, I want to set this a:hover color only for those <a> tags with the class main-nav-item and not the main-nav-item-current, because it has a different color and shouldn't change on hover. All <a> tags within the menu div should change color on hover except the one with the current class.

如何使用CSS？

我尝试过

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

认为只有那些main-nav-item类会改变悬停时的颜色，而不是当前的。

thinking that only ones with main-nav-item class will change color on hover, and not the current one. But it is not working.

推荐答案

尝试：

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

为了理解这是如何工作，重要的是读这个浏览器的方式。 a 定义元素， .main-nav-item 只有那些具有该类，最后伪代码类：hover 应用于之前的限定表达式。

In order to understand how this works it is important to read this the way the browser does. The a defines the element, the .main-nav-item qualifies the element to only those which have that class, and finally the psuedo-class :hover is applied to the qualified expression that comes before.

基本上归结为：

将此悬停规则应用于所有锚元素 main -nav-item ，它们是任何具有菜单的元素的子孙。

Apply this hover rule to all anchor elements with the class main-nav-item that are a descendant child of any element with the class menu.

这篇关于设置：基于类的hover的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！