Welcome to WebmasterWorld Guest from 54.145.13.215

Forum Moderators: not2easy

Message Too Old, No Replies

HREF causing hover issues

certain hrefs cause issue with link hover behavior

     
9:35 pm on Nov 20, 2007 (gmt 0)

Preferred Member

10+ Year Member

joined:Apr 22, 2003
posts: 441
votes: 0


Okay, I know this is going to sound insane so please bear with me. I have a top navigation made using an inline unordered list. All but one have right padding. On hover the text color changes. Nothing fancy.

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]

9:50 pm on Nov 20, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 12, 2006
posts:2493
votes: 22


it might have something to do a:link and a:visited.
have you set up :visited styles in your CSS?

we probably need to see all the styles that apply to the links though before we can figure it out

1:11 pm on Nov 21, 2007 (gmt 0)

Preferred Member

10+ Year Member

joined:Apr 22, 2003
posts: 441
votes: 0


Okay, here are the rest of the anchor styles:

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!

3:19 pm on Nov 26, 2007 (gmt 0)

Preferred Member

10+ Year Member

joined:Apr 22, 2003
posts: 441
votes: 0


No ideas, huh? I don't even know what else to try to troubleshoot. I think I've hit it all.
5:27 pm on Nov 26, 2007 (gmt 0)

Senior Member from CA 

WebmasterWorld Senior Member encyclo is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 31, 2003
posts:9063
votes: 2


Have you tried placing the
:visited
rule before the
:active
rule in the CSS file?
6:50 pm on Nov 26, 2007 (gmt 0)

Preferred Member

10+ Year Member

joined:July 8, 2005
posts:460
votes: 0


I just copied all your HTML/CSS into a new file and all the links worked.
6:54 pm on Nov 26, 2007 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Apr 27, 2001
posts: 12166
votes: 51


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

9:11 pm on Nov 26, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


agreed it's likely pseudo class order

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]

1:05 pm on Nov 27, 2007 (gmt 0)

Preferred Member

10+ Year Member

joined:Apr 22, 2003
posts: 441
votes: 0


Boy am I dumb! Switching the order worked. Why I didn't think to clear my cache and try again is beyond me.

Thanks so much everyone!