CODEWITHSUNDEEP
htmlcss
max_
max_

Reputation: 24481

:hover isn't working with styled 'a' tag

I had the a:hover mechanism working until I implemented the :active, :visited and :link methods to prevent the link from changing colour upon click etc, please can you tell me where I am going wrong?

#header #navigation #textContainer h2 a:hover {
    color: #696969;
}

#header #navigation #textContainer h2 a:visited {
    color: #b3b3b3;
}

#header #navigation #textContainer h2 a:active {
    color: #b3b3b3;
}

#header #navigation #textContainer h2 a:link {
    color: #b3b3b3;
}

Upvotes: 1

Views: 453

Answers (4)

BoltClock
BoltClock

Reputation: 723598

You have your order of pseudo-classes completely mixed up.

The order is :link, :visited, :hover, :active (also known by the mnemonic "LoVe-HAte") See the spec.

#header #navigation #textContainer h2 a:link {
    color: #b3b3b3;    
}

#header #navigation #textContainer h2 a:visited {
    color: #b3b3b3;
}

#header #navigation #textContainer h2 a:hover {
    color: #696969;
}

#header #navigation #textContainer h2 a:active {
    color: #b3b3b3;
}

Upvotes: 4

Wex
Wex

Reputation: 15695

Setting a will actually set a:hover, a:visited, a:active, and a:link. You should really only have to set a:hover if that's the only color you want to change.

Upvotes: 0

Derk Arts
Derk Arts

Reputation: 3460

Did you try:

#header #navigation #textContainer h2 a:hover {
    color: #696969!important;
}

I'm guessing the :hover color gets overwritten by the other definitions.

Upvotes: 0

John Kurlak
John Kurlak

Reputation: 6680

Try moving the a:hover declaration so that it is after the :visited declaration. The problem is that each selector has the same specificity.

Upvotes: 1

Related Questions