A Simple Screw-up: The case of the CSS disabled hover state.
I had been experiencing a problem recently with my CSS. I am much more of an artist than a coder I guess.
I had a set of links that kept getting stuck in a "visited" state where I couldn't get the hover color to show up. Basically it looked like once you clicked on a link it just sorta died. I didn't like it so I had to do some diggin. I felt dumb when I found the answer. So of course I had to share my embarrassment so it would be even more profound. So here it is. Its a stupid mistake but one so simple that I bet I am not the only one who has ever over looked it.
Here have a look.. (I'll highlight it so you don't feel as dumb as I did if you didn't figure it out :)
a:link { font-family: Verdana; font-weight: normal; color: #738B72; text-decoration: none }
a:active { font-family: Verdana; font-weight: normal; color: #99CC33; text-decoration: none }
a:visited { font-family: Verdana; font-weight: normal; color: #738B72; text-decoration: none }
a:hover { font-family: Verdana; font-weight: normal; color: #99FF33; text-decoration: none }
a:link { font-family: Verdana; font-weight: normal; color: #738B72; text-decoration: none }
a:active { font-family: Verdana; font-weight: normal; color: #99CC33; text-decoration: none }
a:hover { font-family: Verdana; font-weight: normal; color: #99FF33; text-decoration: none }
a:visited { font-family: Verdana; font-weight: normal; color: #738B72; text-decoration: none }
The difference between these two seems mundane. Just a line in a certain order but duh!
In the first one when you visit a link and come back the link will not work with the" hover" because the "hover" is placed before the "visited" part of the css
If you want to make the hover work consistently you have to have it somewhere below the "visited" part of the CSS or else the "visited" part simply overrides the "hover" part... :)
|
