a:hover not working on visited links??

when two conflicting rules of the same specificity apply to an element the later rule takes precedence, so in this case the a:link comes after the a:hover so when both apply to the same style attribute, a:link takes precedence.

To fix, change the order so a:hover comes after a:link or use a:link:hover

If you think about the arrangement of your css logically.

The visited colour over-rides the hover of the link, this is the cascading part of css.

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

This is the correct arrangement.

Edit

You beat me

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:hover {}
a:focus{}
a:active {}

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

Eh????

What's this 'FOCUS' you speak of?

(As i said, i'm new to css... please don't strike me down) :?

Kind of like active - when you click on it, or tab to the link, it has the 'focus' - this is usually signified by a dotted border around the hyperlink.

Ahh. So focus should look similar to hover?

Well, similar to hover, but different to active - it needs to stand out so the user knows they have tabbed to it.

However, you don't really need to put it in.

I totally dissagree TPH!

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?

It's a handfull of extra characters and hardly painfull!

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

True, true - however, the :active link state, is it shwon when the user tabs to a link and hits enter?

I've always thought it a bit pointless, as you see it for less than a second.

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

If you think it's pointless then I assume you don't have hover states either, they are generally seen for less (that fact is based on some reasearch I have just made up on the spot ).

It's such a short addition to the CSS to make your site much more keyboard frindly it's be insane not to use it.

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

I do have hover, and they're usually the same as the active page link (NOT :active state).

I've only recently bothered with :focus and :active, as well as bothering with AccessKeys - although I have found these to be a hindrance, especially as I use a lot of keyboar shortcuts; when I press alt+d, I want to go to the address bar, not another webpage!

If you have a hover state just tack ",a:focus" on the end of the selector, go n do keyboard users a favour

You're dead right, accesskeys can be a problem for this very reason. I I think it's best to stick to a few basic ones, home, sitemap, skip navigation kind of thing.

As to the active pseud class - now I would be very interested in hearing ANY reason to have this? I'm not sure I even have time to notice it.

I think active 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)

Only discovered focus on this thread, it seems like a good thing to use. So I think I will.

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 :focus state is not the same as :hover, either for practical or display purposes. The link being hovered is a separate state from the link having focus. :focus indicates which link will activate if the [enter] key is pressed. :hover indicates which link will respond to a mouseclick.

BTW, the :focus should come before the :hover state. Thus
:link
:visited
:focus
:hover
:active

cheers,

gary

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

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

I don't think the red style is necessary, the border is already picked up from the a element. And for a:active, border-style:groove; is probably better.

a {
	border:3px ridge #f00;
	background:#efefef;
	}
a:hover, a:focus {
	background:#fff;
	}
a:active {
	border-style:groove;
	}

It was only an example, "Sheesh". :roll:

Sorry Jo, we've comletely hijacked your thread

So just to reiterate about :focus and :hover; in theory you could tab to a link, which has a green :focus state, THEN hover it with the mouse and it would still change color (if you set it in the hover state).

This ain't my thread.