18 replies [Last post]
Chimpanzee
Offline
newbie
Last seen: 15 years 7 weeks ago
Joined: 2005-05-22
Posts: 3
Points: 0

Hi everyone.

I'm new to CSS but i am really starting to see it's benefits.

I am having one problem though:
I have specified hyperlink appearanced in CSS but on the page they don't seem to work in some cases. These are the entities i have customised:

a:hover     { color: #6C0000; text-decoration: underline } 
a:link         { text-decoration: none; color: #2E2E2E } 
a:visited    { text-decoration: none; color: #2E2E2E } 
a:active     { text-decoration: none; color: #4A414A }

It seems that after a hyperling becomes visited it ignors the hover effect. Either that, or the a:visited tag is over-ruleing the a:hover tag.

Can someone please help asap.

Thanks.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 42 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

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

Joseph Sprint
Joseph Sprint's picture
Offline
Enthusiast
Last seen: 5 years 45 weeks ago
Timezone: GMT+1
Joined: 2005-04-15
Posts: 381
Points: 0

a:hover not working on visited links??

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 Wink

briski
briski's picture
Offline
Elder
London
Last seen: 8 years 4 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

a:hover not working on visited links??

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 {}

Chimpanzee
Offline
newbie
Last seen: 15 years 7 weeks ago
Joined: 2005-05-22
Posts: 3
Points: 0

a:hover not working on visited links??

briski wrote:
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 {}
]

Eh????

What's this 'FOCUS' you speak of?

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

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 16 weeks 19 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

a:hover not working on visited links??

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.

Verschwindende wrote:
  • CSS doesn't make pies

Chimpanzee
Offline
newbie
Last seen: 15 years 7 weeks ago
Joined: 2005-05-22
Posts: 3
Points: 0

a:hover not working on visited links??

Ahh. So focus should look similar to hover?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 16 weeks 19 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

a:hover not working on visited links??

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.

Verschwindende wrote:
  • CSS doesn't make pies

briski
briski's picture
Offline
Elder
London
Last seen: 8 years 4 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

a:hover not working on visited links??

I totally dissagree TPH! Laughing out loud

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

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 16 weeks 19 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

a:hover not working on visited links??

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.

Verschwindende wrote:
  • CSS doesn't make pies

briski
briski's picture
Offline
Elder
London
Last seen: 8 years 4 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

a:hover not working on visited links??

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 Wink

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 Laughing out loud).

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

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 16 weeks 19 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

a:hover not working on visited links??

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!

Verschwindende wrote:
  • CSS doesn't make pies

briski
briski's picture
Offline
Elder
London
Last seen: 8 years 4 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

a:hover not working on visited links??

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

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.

Joseph Sprint
Joseph Sprint's picture
Offline
Enthusiast
Last seen: 5 years 45 weeks ago
Timezone: GMT+1
Joined: 2005-04-15
Posts: 381
Points: 0

a:hover not working on visited links??

I think active can be cool when you want to make a button.

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

a:hover, a:focus Laughing out loud {
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.

gary.turner
gary.turner's picture
Online
Moderator
Dallas
Last seen: 9 min 58 sec ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

a:hover not working on visited links??

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

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

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 42 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

a:hover not working on visited links??

Joseph Sprint wrote:
...
a {
border:3px ridge #f00;background:#efefef;}

a:hover, a:focus Laughing out loud {
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. Smile

Joseph Sprint
Joseph Sprint's picture
Offline
Enthusiast
Last seen: 5 years 45 weeks ago
Timezone: GMT+1
Joined: 2005-04-15
Posts: 381
Points: 0

a:hover not working on visited links??

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:

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 16 weeks 19 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

a:hover not working on visited links??

Sorry Jo, we've comletely hijacked your thread Laughing out loud

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).

Verschwindende wrote:
  • CSS doesn't make pies

Joseph Sprint
Joseph Sprint's picture
Offline
Enthusiast
Last seen: 5 years 45 weeks ago
Timezone: GMT+1
Joined: 2005-04-15
Posts: 381
Points: 0

a:hover not working on visited links??

This ain't my thread. Smile