Set a:hover based on class

I have the following HTML:

<div> <a href="home">home</a> <a href="business">business</a> <a 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.

7 Answers

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.

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.

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

a.main-nav-item:hover { } 

how about .main-nav-item:hover

this keeps the specificity low

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.

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 

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