Set a:hover based on class

Question

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.

Andrew Hare · Accepted Answer · 2009-12-20T13:38:41.853

140

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.

edited Dec 20 '09 at 13:38

answered Dec 20 '09 at 13:22

Andrew Hare

344,730
71
640
635

2

It worked! :) Can you explain how that CSS selector is interpreted by the browser? Like in words. So that I know the logic and it'll be helpful for other CSS I write... – Dec 20 '09 at 13:24
In words, that selector would be: “all tags with a class of main-nav-item, and an ancestor with a class of menu, that are in the hover state (i.e. have the mouse cursor on top of them)”. – Paul D. Waite Dec 20 '09 at 13:32

score 12 · Answer 2 · answered Dec 20 '09 at 13:34

12

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.

answered Dec 20 '09 at 13:34

Scott Radcliff

1,501
1
9
13

Another way of doing it. Will check it out too. Thanks :) – Dec 20 '09 at 13:52

Rizwan · Answer 3 · 2019-03-04T19:13:36.720

6

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

a.main-nav-item:hover { }

edited Mar 04 '19 at 19:13

answered Feb 08 '18 at 17:24

Rizwan

3,741
2
25
22

score 1 · Answer 4 · answered May 11 '16 at 13:57

1

how about .main-nav-item:hover

this keeps the specificity low

answered May 11 '16 at 13:57

Aleksej Dix

21
1

score 1 · Answer 5 · edited Jun 24 '19 at 20:16

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.

Honeybear65 · Answer 6 · 2021-04-18T09:51:04.290

1

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

edited Apr 18 '21 at 09:51

answered Apr 18 '21 at 09:08

Honeybear65

311
1
10

How did you figure out that adding !important at the end forces it to add the hover color? Thank you! This worked for me. +1 to your answer. – Joseph Feb 21 '23 at 09:15

score 0 · Answer 7 · answered Dec 20 '09 at 13:47

One common error is leaving a space before the class names. Even if this was the correct syntax:

.menu a:hover .main-nav-item

it never would have worked.

Therefore, you would not write

.menu a .main-nav-item:hover

it would be

.menu a.main-nav-item:hover

Set a:hover based on class

7 Answers7

Linked