Forum Moderators: not2easy
I just noticed today that the hover works on all but two of the links. I made sure it wasn't a position issue, i.e. - I put other links in same position and they still worked. I was concerned that there may be some overlapping element that wouldn't allow the hover to trigger.
I tried different link text on one of the links that won't do the hover. No particular reason why. The hover didn't work.
I tried removing the padding. No luck.
I tried copying the list item from one of the links that work and replacing the link text and href value. No luck.
Then I simply tried replacing the href and you know what? That worked! This is a plain href, no params. AND, other links for which the hover works ALSO have the same type of href.
So, in the following the fourth and fifth links don't work:
<ul>
<li class = "topnavlinkpad"><a href = "http://www.example/v2/some_file.html" tabindex = "10">Some file</a></li>
<li class = "topnavlinkpad"><a href = "http://www.example/v2/faqs/" tabindex = "15">FAQ</a></li>
<li class = "topnavlinkpad"><a href = "http://www.example/v2/forms/" tabindex = "20">Form</a></li>
<li class = "topnavlinkpad"><a href = "http://www.example/v2/due_dates.html" tabindex = "25">Due Dates</a></li>
<li class = "topnavlinkpad"><a href = "http://www.example/v2/board_members.html" tabindex = "30">Board Members</a></li>
<li class = "topnavlinkpad"><a href = "http://www.example/v2/related_links.html" tabindex = "35">Related Links</a></li>
<li class = "topnavlinkpad"><a href = "http://www.example/v2/contacts.html" tabindex = "40">Contacts</a></li>
<li><a href = "http://www.example/v2/" tabindex = "45">Home</a></li>
</ul>
Applicable css:
#topnav ul li a:hover, li.topnavlinkpad a:hover{color: #8dc73f;}
#topnav is the div in which the ul above is contained.
Doctype: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
And yes, the html and css validates on the W3C validators.
Verdict? Am I nuts? Has anyone had this issue before? The two links that won't hover work, i.e. - they go to their intended pages. HELP!
[edited by: AWildman at 9:41 pm (utc) on Nov. 20, 2007]
we probably need to see all the styles that apply to the links though before we can figure it out
a{color: #1d9b00;}
a img, a:hover img, #headertext a, img{text-decoration: none; border: none;}
#headertext a:hover, #topnav ul li a:hover, li.topnavlinkpad a:hover{color: #8dc73f;}
#topnav ul li a, #topnav ul li a:visited
{
color: #ffffff;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
}
Any help is greatly appreciated. It is just SUCH an odd thing!
:visited:active
I just noticed today that the hover works on all but two of the links.
Sounds like you have a :visited issue happening. Your visited parameters are the same as your hover. The order of the rules should be...
LVHA
a:link
a:visited
a:hover
a:active
Your hover is overriding your visited and it sounds like some colors need to change so you can see what is happening. You've visited those two links that are not doing what you want them to do. Clear your Internet history and those two links will probably revert back to what they were before being visited, the a:link status.
Have you tried placing the :visited rule before the :active rule in the CSS file?
Me thinks that is the issue. :)
In this case you have a very simple case of the cascade doing it's work..
the rules that matter (in cascade order) here are
1. #headertext a:hover
2. #topnav ul li a:hover
3. #topnav ul li a:visited
the first two apply to the hover and the second (#2) of the first two win, not only because of the cascade but because it is more specific (i.e. there is more elements in the selector)
when reaching rule 3 (#3), it is equal to rule 2 (#2) as per specificity so the Cascade will apply this time and the last rule takes precedence - e.g if the link is visited and also then hovered over.. is the fact that it is visited (last in the cascade) that takes precedence!
You can 'swap' the order, which should work, as suggested
#topnav ul li a, #topnav ul li a:visited
{
color: #dad;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
}#headertext a:hover, #topnav ul li a:hover, li.topnavlinkpad a:hover {
color: #f00;
}
However, did you know that you can also get situations like this to work by getting more specific - combine the pseudo classes just like combining selectors it makes them(psuedo classes) more specific
aka... I never really did understand why we should need 4-5 rules, in the recommended order, for hover effects to work :o
you could try adding ..
#topnav ul li a:visited:hover
to
#headertext a:hover, #topnav ul li a:hover, li.topnavlinkpad a:hover, #topnav ul li a:visited:hover {
color: #f00;
}
this might suit better, or not.. but by combining pseudo classes you have added an extra depth to the specificity of the selector and have over-ridden the Cascade
just another way...
Suzy
edit reason - my bad, my example showed links in the original order.. sorry
[edited by: SuzyUK at 10:07 pm (utc) on Nov. 26, 2007]
Thanks so much everyone!
