CSS hover doesn't work

I am making a tabbed navigation menu via jQuery in my website. All the individual tabs have the class navBarLink and here's the CSS pertaining to it:

.navBarLink:link,.navBarLink:visited
{
display:block;
height:27px;
width:120px;
color:#FFF;
background-color:#06C;
text-align:center;
padding:4px;
text-decoration:none;
border:0;
margin:2px 2px 0 2px;
}
.navBarLink:hover,.navBarLink:active
{
background-color:#FFF;
color:#06C;
border-bottom-style:solid;
border-bottom-color:#FFFFFF;
border-bottom-width:1px;
}

The problem is that the background color changes when I click on a tab but doesn't change when I hover on a tab. Basically my hover and my click don't work simultaneously. Any idea why this is happening?

Answers


http://jsfiddle.net/UnFhQ/

This works. (I removed the :link from the first css code, just so I could see the div's background color...) But click this and let us know what about the code doesn't work. Thanks


Need Your Help

Checking for a valid and in-use email address in PHP

php sendmail email-verification

I'm not sure if this is exactly possible, but figured I'd throw it out there.

JScrollBar adjustment issue

java jscrollbar

I am having an issue with my horizontal scroll bar demo. I am trying to move a custom message panel using the scroll bar. I used an anonymous listener and override the adjustmentValueChanged() method