1 reply [Last post]
hifispin
Offline
newbie
Seacoast
Last seen: 11 years 4 weeks ago
Seacoast
Joined: 2009-02-14
Posts: 1
Points: 0

I am trying to create a simple Navigation where my links change color upon a mouse over. I am not using images. I need to have 3 unique areas that have diffrent Mouse-over colors. The page works fine in I.E.8 but not in Chrome or FireFox. Note, in the two browsers, the Font Size, Color and Face works just not the color change upon mouse roll-over.

---------
My Link to my Style Sheet
---------
<link href="Style.css" rel="stylesheet" type="text/css">

----------
My CSS Code
----------

BODY { background-color: #FFFFFF; font-family: Verdana; font-size: 10px; color: #000000;} 
 
Table { background-color: #FFFFFF; font-family: Verdana; font-size: 12px; color: #000000;} 
 
a:LINK {color: Red; text-decoration: underlined;}
a:HOVER {color: #484848; text-decoration: underlined;}
a:visited {color: Red; text-decoration: underlined;}
 
#BNav a:HOVER {color: Red; text-decoration: none;}
#BNav a:LINK {color: #FFFFFF; text-decoration: none;}
#BNav a:visited {color: #FFFFFF; text-decoration: none;}
#BNav {font-face: Verdana,Geneva,Arial,Helvetica,sans-serif;}

------------------
My HTML Code
------------------

<td id="BNav" width="481" height="32" background="img/BelowNav.gif">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">History</a></td>

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 21 hours 34 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

You have your style

You have your style selectors out of order. As you have it, the :visited rules will always override the :hover rules.

Use this order:

a:link
a:visited
a:focus
a:hover
a:active

:link and :visited are mutually exclusive, so order between them doesn't matter. All other pseudo class selectors will override those that come before them. For example, if a visited link s/b purple, and a hovered link s/b green, consider the effect of the order if a visited link is hovered, and :visited follows :hover in the rules. Then, vice versa.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.