No replies
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 9 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5125
Points: 2722

The most common cause of hover not working is the incorrect order of the pseudo classes.

Here's the correct order in an example

a:link{color:blue;}
a:visited{color: purple;}
a:hover{color:red;}
a:active{color:green;}

How do you remember the order?
If you think about the order of cascade, you will see the last has to override the previous.
So a visited link has to show up over a link that has not been visited.
A link you are hovering on shoud show over a visited or non-visited link and an active link (one you are clicking on) has to show over all the others.

Or you could use: LoVe HAte to help remember the order.

Here's more info on each of the pseudo classes:
http://www.csscreator.com/attributes/properties/:link
http://www.csscreator.com/attributes/properties/:visited
http://www.csscreator.com/attributes/properties/:hover
http://www.csscreator.com/attributes/properties/:active

Active

The :active state allows positive feedback to the user that the keypress or click has occurred. This type of feedback may be particularly important to the mobility impaired. I find it a nice feature when using some of the cheap keyboards, with poor tactile feedback, I've had to suffer with.

The :active state can be cool when you want to make a button.

a {border:3px ridge #f00;background:#efefef;}

a:hover, a:focus {
border:3px ridge #f00;background:#fff;}

a:active {
border:3px groove #f00;background:#fff;}

When pressed the button outline will change from ridge to groove and is very noticable. (Obviously there is more code to make the button such as width height etc)

Focus

Don't forget to use focus - if you have a different hover state you should use the same (or at least some indication that you are focusing) for focus.

a:link {}
a:visited {}
a:focus{}
a:hover {}
a:active {}

If you bother to have a hover state why not have a focus state so that keyboard users can get the same visual que as mouse users?

Focus is the state when the link has been tabbed to but not entered on, just like if you hovering over it, this might be for a second might be for an age, long links might take a while to read before you decide to click on it.

It's a handful of extra characters and hardly painful!

Rather than:
a:hover {color: indianred;}

have
a:hover, a:focus {color: indianred;}

Also it's not really like active. the Active state is when the link is *being* clicked.

Focus is much more akin to hover in that is's a the link that will become active if you hit that mouse buttong/enter key.

Remember, it's often hard to see when the tab focus is, more so then where the mouse is pointing. Adding focus helps solve this dilemma

contributions from tph, briski, Joseph Sprint, kk5st and Chris..s

Tags: