Search code examples
htmlhoverhref

HTML href - Hover not systematic

I have observed a strange behavior with html href attribute :

Some of my links are note colored when cursor is hover, despite of a CSS selector defined for this.

When I insert an http link, my browser preview in the left bottom (Mozilla Firefox) is every time in https.

I know it seems weird and a very basic question, but I've never notided a behavior like this. Something I missed ?

Here is a demo

dt{font-family:'Muli',sans-serif;font-size:14px;}
A:link {color: #1c1c1c;text-decoration:none;}
A:hover {color: #3d62e7;}
A:visited {color: #1c1c1c;text-decoration:none;}
<link rel='stylesheet' href="https://fonts.googleapis.com/css?family=Muli">

<DT>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<A target="_blank" HREF="http://www.discogs.com/fr/Eric-B-Rakim-Let-The-Rhythm-Hit-Em/master/13184">01 - Blue when hover, no problem</A>
<DT>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<A target="_blank" HREF="http://www.discogs.com/fr/Eric-B-Rakim-Dont-Sweat-The-Technique/master/13419">02 - No specific color when hover</A>
<DT>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<A target="_blank" HREF="http://www.discogs.com/fr/A-Tribe-Called-Quest-Midnight-Marauders/master/45947">03 - No specific color when hover</A>
<DT>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<A target="_blank" HREF="http://www.discogs.com/fr/A-Tribe-Called-Quest-We-Got-It-From-Here-Thank-You-4-Your-Service/master/1092073">04 - Blue when hover, no problem</A>

Solution

  • Look at your style for visited links:

    A:visited {color: #1c1c1c;text-decoration:none;}

    I would be willing to bet the ones you are not seeing change color are links you have already visited.

    I can confirm this behavior (in Chrome). Once I visit one of the links in your example, it no longer reacts with the hover style.

    The order in which you declare the rules matters. You can make the :hover state take precedence by altering the order of the rules and putting :hover after :visited:

    A:link {color: #1c1c1c;text-decoration:none;}
A:visited {color: #1c1c1c;text-decoration:none;}
A:hover {color: #3d62e7;}