0

I have two links in my header from the class "menu_top", hence:

<a class="menu_top" href="adverteerders.html"  >adverteerders</a>
<a class="menu_top" href="ondernemers.html"  >ondernemers</a>

The corresponding css code is:

.menu_top {
    font-size: 14px; 
}
.menu_top:link {color: #404040;}
.menu_top:hover {color: #CC0033;}
.menu_top:visited {color: #404040;}

When I execute this code and hover my mouse on 'adverteerders' then the colour does not change. When I hover my mouse on 'ondernemers' then strangely it does change. So what I did was COPIED the exact code of ondernemers and then it seemed to work again. Now when I rewrite 'ondernemers' to 'adverteerders' then the doesn't work again. However when I type oadverteerders.html then the hover works.

What the hell is going on here?

1 Answers1

1

The order of your CSS selectors matters. When an element matches multiple CSS selectors with the same specificity, the selector defined later overrides the earlier one(s).

So if you use the :visited pseudo-class after the :hover pseudo-class, then the :visited styles will take precedent over the :hover styles, overriding them where they conflict.

That's why you typically want to define your :hover and :active styles after :visited.

Lèse majesté
  • 7,923
  • 2
  • 33
  • 44
  • See also: http://stackoverflow.com/questions/7371732/why-does-foo-alink-foo-avisited-selector-override-ahover-aactive-s/7371846#7371846 – BoltClock Mar 16 '13 at 13:58