根据类别设置 a:hover

发布于 2024-08-15 16:19:14 字数 869 浏览 7 评论 0原文

我有以下 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 颜色em> 而不是 main-nav-item-current，因为它具有不同的颜色，并且在悬停时不应更改。 menu div 中的所有标签在悬停时都应更改颜色，但具有 current 类的标签除外。

我怎样才能使用 CSS 做到这一点？

我尝试过类似的

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

想法，认为只有具有 main-nav-item 类的项目才会在悬停时改变颜色，而不是当前的颜色。但它不起作用。

原文

I have the following 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>

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

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.

How can I do it using CSS?

I tried something like

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

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

瀟灑尐姊 2024-08-22 16:19:14

试试这个：

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

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

基本上可以归结为：

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

Try this:

.menu 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.

Basically it boils down to this:

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.

回复收藏 0 原文

ゝ杯具 2024-08-22 16:19:14

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

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

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

Cascading is biting you. Try this:

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

This code says to grab all the links that have a class of main-nav-item AND are children of the class menu, and apply the color #DDD when they are hovered.

回复收藏 0 原文

时常饿 2024-08-22 16:19:14

根据类设置 a:hover 您可以简单地尝试：

a.main-nav-item:hover { }

Set a:hover based on class you can simply try:

a.main-nav-item:hover { }

回复收藏 0 原文

陌上青苔 2024-08-22 16:19:14

怎么样
.main-nav-item:hover

这可以保持较低的特异性

回复收藏 0 原文

迷爱 2024-08-22 16:19:14

尝试一下，

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

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

假设我们的代码中使用了一个锚标记，并且在主程序中调用了“div”类。 a:hover 可以做到这一点，当鼠标移到它上面时，它会给背景提供吸血鬼黑色，给文本提供白色，这就是悬停的意思。

try this

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

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

lets say we have a anchor tag used in our code and class"div" is called in the main program. the a:hover will do the thing, it will give a vampire black color to the background and white color to the text when the mouse is moved over it that's what hover means.

回复收藏 0 原文

暮年 2024-08-22 16:19:14

我发现如果你添加一个 !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”可以帮助您记住它：链接 ->访问过 ->悬停->积极的

I found if you add a !important, it works when previously it didn't.

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

Also, I've read somewhere that the order is important. The mnemonic "LoVe HaTe" helps you remember it: link -> visited -> hover -> active

回复收藏 0 原文