CSS hover over text not turning correct color

[javascript7]

I want the text to turn black when hover over - it’s not. What am I doing wrong? Thanks!

<style type="text/css">
 <!--
 a.nav:link {color: #4c659b;}
 a.nav:visited {color: #4c659b;}
 a.nav:active {color: #4c659b;}
 a.nav:hover {background-color: #c4d7dd;}
 a.nav:active {color: #000000;}
 a.nav {text-decoration: none;}
 -->
 </style>  

[Erik_J]

@javascript7

I want the text to turn black when hover

Seems you happen to apply black color on its active state instead of the hover state.

[coothead]

Hi there javascript7,

note that the commenting ( <!-- --> ) is not required, either.

coothead

[javascript7]

@Erik_J

Seems you happen to apply black color on its active state instead of the hover state

So I added that and it worked, thanks.
Is this clean looking or can I improve upon it?
Also deleted the commenting which I knew wasn’t necessary - thanks for reminder.
Thanks.

<style type="text/css">
 a.nav:link {color: #4c659b;}
 a.nav:visited {color: #4c659b;}
 a.nav:active {color: #4c659b;}
 a.nav:hover {background-color: #c4d7dd;}
 a.nav:hover {color: #000000;}
 a.nav:active {color: #000000;}
 a.nav {text-decoration: none;}
 </style>  

[Erik_J]

Just want to mention that the order of the state rules in the code determine what state will override the others.

A good order in code is to follow the “LoVe Foils HAte” rule of thumb where the later in code overrides all states before:
Link, unvisited/recognized as link
Visited, in history
Focus, in focus having the marker placed by tab key or mouse click
Hover, under the mouse pointer
Active, only during the mouse key is down, the mouse key up fires and stops active.

The a (anchor) applies to all states too, so all default styles should be on the a followed by its states styled in the LoVe Foils HAte order to make them override each other properly.

Edit)
Usually only the a and a:focus and a:hover is styled in order to give user friendly clues. The visited state are better to keep as the user expect it and the active could be confusing if the user is slow in releasing the mouse key.

Just want you to know from start.

[javascript7]

@Erik_J

“ L o V e F oils HA te” rule

Thank you for that!!!

[PaulOB]

@javascript7

Is this clean looking or can I improve upon it?

Combine these into one rule:

 a.nav:hover {background-color: #c4d7dd;}
 a.nav:hover {color: #000000;}

Into:

a.nav:hover {background-color: #c4d7dd;color:#000;}

[Gandalf]

Also to say

a.nav:active {color: #4c659b;}

will be overwritten with

a.nav:active {color: #000000;}