Question

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?

Answer 1

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