The Shed is going Social! Join us on FaceBook and Twitter and chime in on the conversation.
|
 |
|
Dev Shed Forums
> Web Design
> CSS Help
|
CSS problem when mouse hovers over link - doesn't always work
Discuss CSS problem when mouse hovers over link - doesn't always work in the CSS Help forum on Dev Shed.
CSS problem when mouse hovers over link - doesn't always work Cascading Style Sheets (CSS) forum discussing all levels of CSS, including CSS1, CSS2 and CSS Positioning. CSS provides a robust way of applying standardized design concepts to your web pages.
|
|
 |
|
|
|
|
Dev Shed Forums Sponsor:
|
|
|
August 19th, 2003, 03:16 PM
|
|
Contributing User
|
|
Join Date: Jun 2000
Posts: 61
Time spent in forums: < 1 sec
Reputation Power: 13
|
|
|
CSS problem when mouse hovers over link - doesn't always work
I'm having a problem with CSS on my site. I want links to change color and be underlined when the cursor moves over the link. It seems to work for some links but not others. I've tried this with both Mozilla 1.4 and IE6 and they both exhibit the same problem.
This is my site:
http://pixellent.stodge.net/wiki/vi...w&page=HomePage
And this is the CSS code I have:
Code:
a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #5F7383;
text-decoration: none;
}
a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #006A92;
text-decoration: underline;
}
a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #5F7383;
text-decoration: none;
}
Can anyone see any obvious mistakes?
Thanks
|
August 19th, 2003, 03:36 PM
|
|
The New User
|
|
Join Date: Jul 2003
Location: CA, USA
Posts: 109
Time spent in forums: < 1 sec
Reputation Power: 10
|
|
CSS stands for Cascading Style Sheets. This means that as you go down the priority order, code can be overriden. This is what is happening here. I don't know if you noticed but all the links that work are the ones you have NOT visited b4, and all the ones that DONT work are the ones you have visited. The reason this occurs is because your a:visited is overriding your a:hover. To solve is simple. Move a:visited above a:hover, and below a:link, and all should work  .
Hope that helps,
--Neil
|
August 19th, 2003, 03:43 PM
|
|
Contributing User
|
|
Join Date: Jun 2000
Posts: 61
Time spent in forums: < 1 sec
Reputation Power: 13
|
|
|
Well I'll be.....
How simple was that!! lol
Thanks - appreciate it
|
August 20th, 2003, 12:04 AM
|
|
The New User
|
|
Join Date: Jul 2003
Location: CA, USA
Posts: 109
Time spent in forums: < 1 sec
Reputation Power: 10
|
|
|
Haha, yeah, I once had that problem too... Just always remember, the order is link,visited,hover,active...
--Neil
|
Developer Shed Advertisers and Affiliates
| Thread Tools |
Search this Thread |
|
|
|
| Display Modes |
Rate This Thread |
 Linear Mode
|
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
