...

View Full Version : a:hover problem



fractalbit
01-21-2004, 03:15 PM
Hello, i haeve the following code in a .css file :

a:link { color : #FFFFFF; text-decoration:none;}
a:hover { color : red; text-decoration: none; text-style: italic;}
a:visited { color: #FFFFCC; text-decoration:none;}

The problem is that the color change only when i hover the mouse over a non-visited link. If i hover over a visited link the color doesnt change. Also the link doesnt change to italic at all. Anyone knows why is this happening?

And something more. How can i aply different colors for the links for a part of an html page?

Roy Sinclair
01-21-2004, 03:17 PM
The order you specify the rules affects how they operate (ie: their relative priority). Move the :hover rule AFTER the :visited rule and that will fix the problem.

You can also use "class" or "descendant" selectors to create different rules for links in different parts of your web page.



a { ... }
a:visited { ... }
a:hover { ... }

// Classes
a.specialLinks { ... }
a.specialLinks:visited { ... }
a.specialLinks:hover { ... }

// Descendant
div.sidebar a { ... }
div.sidebar a:visited { ... }
div.sidebar a:hover { ... }

fractalbit
01-21-2004, 03:21 PM
Originally posted by Roy Sinclair
The order you specify the rules affects how they operate (ie: their relative priority). Move the :hover rule AFTER the :visited rule and that will fix the problem.

Thank you very much for the quick reply, it worked!

Any ideas for the remaining matters? (about italic not working, and applying some different rules for the links only in a part of a page)

Roy Sinclair
01-21-2004, 03:29 PM
See my edited post, I posted the first part a bit too quickly :o

Roy Sinclair
01-21-2004, 03:31 PM
The italics aren't working because text-style isn't a valid CSS rule, you should be using font-style instead.

fractalbit
01-21-2004, 04:07 PM
Thanks again very very much! :D :thumbsup:

J&J
01-23-2004, 04:18 PM
Yup, if you don't put your CSS links in order, then one could override the other & drive you nuts. I always put this acronym in a comment section of my CSS template, so I'll remember the correct order - which is: LVFHA

Link
Visited
Focus
Hover
Active

me'
01-23-2004, 05:27 PM
LoVe HAte is the way most people remember it.

jakenoble
02-07-2004, 01:17 AM
a great post, worked for me.

rmedek
02-07-2004, 05:04 AM
Originally posted by me'
LoVe HAte is the way most people remember it.
Or, you know, Lewd Vicious Furry Hamster Attack. My personal favorite...:D :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum