Topic awaiting preservation: Hover colors for active and visited links (Page 1 of 1)

Hey guys. I can't seem to get my visited hover color back to the origianl state when you mouse over it.
In my CSS file, I have all the proper statements (I think);
A:active {text-decoration: none; color: #FFFFFF;}
A:hover {text-decoration: none; color:#FF0000;}
A:link {text-decoration: none; color: #FFFFFF;}
A:visited { text-decoration: none; color: #FFFFFF;}

Basiclly, When one of my visitors get to the website, they see the table at the top with the 3 hover links there (Which are White), then when their mouse rolls on top of it, it changes color (Which is Red), then the visited link
(Which is White again) shows when they return to the web site, BUT when they mouse over the already clicked-on link, the hover color (RED) doesn't activate. Meaning, it's white forever unless they clear their page history, but I want it to change ALL THE TIME, no matter how many times they click on it. How do I do that?

Genki Dave

O genki desu ka? (I dig the user name )

CSS is known to be a little funky when it comes to the order of your link pseudo-classes. In other words, you'll get different behavior depending on what order your pseudo-classes appear in your CSS. I'm just looking at some of my style sheets, and it appears that "hover" should come after "visited". I don't use the "active" or "link" pseudo-classes, so I'm not sure about those, but trying moving "hover" to the end of that list and see what happens. If that doesn't work, we'll take it from there. In the meantime, I'll see if I can't dig up some documentation on this...

[Edit: You gotta love Google: a search on "css link pseudo-classes order" brought me straight to Eric Meyer's page on Link Specificity. It goes into much more detail on the above issue--check it out.]

[Edit2: Huh, I just realized that this is in the wrong forum... no wonder I was the first to answer. If a passing Mad Sci would be so kind as to move this to the CSS forum...]
___________________________
Suho: www.liminality.org

You da man! Wow, to think that all I had to do was rearange the A.hover and presto! Isn't that sometimes
so agravating. You have the proper code, but it's just in the wrong order.

Thanks a whole bunch, or I mean Kumsamida!!

Genki Dave

That issue bothered me for a year and a half before I discovered there was a solution.

the correct order is this:

a:link

a:visited

a:active

a:hover

although it is variable depending on what effect you want to create - the thing to remember is that css will always (normally speaking) use the last declaration (most recent in code reading/writing, top down terms) in the css so therefore Hover needs to be at the end for the effect to continue to work on links that have been visited or that are currently active. Visited and Active can used either way round depending on the effect you want once again, so if Visited is first then the Active state should still show when you click the link, if the Active state is first then the Visited state will show from then on once the link is clicked and the active state will cease to apply after the first instance of it's use. It is for this reason that the Hover state should always be last in order for it to properly show regradless of whether the link is active or has been previously visited.

Sorry if that's confusing for you, it's a hard one to explain although I'm sure aomeone else could have done it better. If you are really interested in what does what you could make up few test demos with the pseudo classes in different orders but I doubt the subject is that interesting. If you ever have problems with the pseudo classes then just remember that it could be the order that is to blame and look at that.

My intention for this post was to clarify the details of link pseudo classes, although I feel I have probably just confused people even more. Sorry about that.

Jon

visit my CryoKinesis Online Gallery

Yes, the problem here is that a link can be both visited *and* hovered, and the last color specified takes precedence.

genkidave: Not a problem. That's what we're here for

smonkey:

quote:

---

it's a hard one to explain although I'm sure aomeone else could have done it better.

---

Thus my link to Eric Meyer's page on the subject above... he does a very good job of explaining it.


___________________________
Suho: www.liminality.org

Suho1004:

quote:

---

Thus my link to Eric Meyer's page on the subject above... he does a very good job of explaining it.

---

I swear that wasn't there when I wrote my blurb, you must have added that in an edit later or something or I'm just going mad

smonkey: Sorry, I'm afraid you're going mad (both of my edits were within minutes of posting). It's about time you caught up with the rest of us.

I think shock treatments might help with that, though. I'll be down in the basement if you need me.


___________________________
Suho: www.liminality.org