CODEWITHSUNDEEP
csshover
Rhiannon
Rhiannon

Reputation: 211

CSS pseudo-class :hover rule is not being applied

I'm trying to make it so my links remain white in colour but when the mouse hovers on them they turn grey and have an underline but it isn't working, the link works but it just stays white, here's my CSS code:

a:hover {
    text-decoration: underline;
    color:#666666
}

a:visited {
    text-decoration: none;
    color:#FFFFFF
}

a:link {
    text-decoration: none;
    color:#FFFFFF
}

Upvotes: 1

Views: 897

Answers (5)

Michal
Michal

Reputation: 3642

You should order link pseudo classes like this:

a {...}
a:link {...}
a:visited {...}
a:focus {...}
a:hover {...}
a:active {...}

Upvotes: 1

user663031
user663031

Reputation:

You can track down such issues easily by examining the styles in Chrome devtools. Did you do that?

  1. Right-click on the element you're worried about and choose "Inspect element".

  2. The style tab will open. Next to element.style, over on the right, you'll see three icons. The middle one is a dotted rectangle with a little arrow.

  3. Click on that and a pane will open. Set the :hover state. See screenshot below.

  4. Now examine the rules being applied. You will notice that the properties being set by your :hover rule are crossed out. This means that they are being overidden. You will also see that the properties in your :link rule are the ones being applied. Why is that? Because, as other posters have pointed out, that rule comes later in your CSS and thus takes precedence.

Debugging CSS styles in Chrome devtools

A quick google of "hover css" would have given you the relevant page on MDN, always an excellent resource, which states in the very first paragraph:

The :hover CSS pseudo-class matches when the user designates an element with a pointing device, but does not necessarily activate it. This style may be overridden by any other link-related pseudo-classes, that is :link, :visited, and :active, appearing in subsequent rules. In order to style appropriately links, you need to put the :hover rule after the :link and :visited rules but before the :active one, as defined by the LVHA-order: :link — :visited — :hover — :active.

SO is not a crowd-sourced debugging forum. Learn to debug for yourself.

Upvotes: 0

Raj Nathani
Raj Nathani

Reputation: 2845

the hover properties set out for <a> are defined for the normal state (which means that it covers both visited and unvisited links) however you have defined a:visited and a:link as well (and also mentioned it after the :hover only declaration), the css parser will instead give the properties of these definitions higher precedence.

The Workarounds

Workaround #1

Make it more specific by changing:

a:hover {
    text-decoration: underline;
    color:#666666
}

to

a:hover, a:visited:hover, a:link:hover {
    text-decoration: underline;
    color:#666666
}

A demonstration @ http://jsfiddle.net/Wz6aR/

Workaround #2

To alter the precedence change the declaration order to:

a:visited {
    text-decoration: none;
    color:#FFFFFF
}

a:link {
    text-decoration: none;
    color:#FFFFFF
}

a:hover {
    text-decoration: underline;
    color:#666666
}

A demonstration @ http://jsfiddle.net/9cGPv/

Upvotes: 1

icedwater
icedwater

Reputation: 4887

As CSS is cascading, the last rule overwrites the ones before. If you shift the a:link definition which is more general up, it should work fine. This is of course the most minimal change that happens to work.

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324620

To clarify icedwater's answer a little, psuedoclasses such as :hover, :link and so on all have the same specificity as classes, and more importantly they have the same specificity as each other.

I'm with you, personally I think it'd be good if :visited implied !important since it's a user-controlled state, but that would make it more complicated so... yeah. Just rearrange your groups - in fact, the order you need is the exact opposite to the one you have now.

Upvotes: 2

Related Questions