Question

I’ve got a menu like this one :

<ul id="menu">
    <li><a href="#" id="test">test</a></li>
    <li><a href="#" id="test2">test2</a></li>
</ul>

and css :

#menu li a:link {
background: transparent;
}

#menu li a:hover {
background-color: red;
}

At some point in my code I need to make the background of the links transparent again, so I make a :

$("#menu > li > a:link").css("background","transparent");

Which works but after that, my problem is that it seems to wipe the background-color attribute of the css hover. Indeed when I hover the links again nothing happens. If that helps when I add color:blue in the #menu li a:hover css, the text is blue when I hover but still no background-color.

I figured out a way to do the hover with jQuery but I would prefer to do it with css since in my opinion that’s how it should be.
Is it a bug ? Is there any way to make the background transparent without wiping the hover css ?

Thanks in advance,

Nolhian

Answer 1

I had this same problem, and my solution was to make two separate classes rather than change the background color in jquery.

a.default:hover {  background-color: red; }
a.hovered:hover {  background-color: transparent; }  

$("#menu > li > a:link").removeClass("default");
$("#menu > li > a:link").addClass("hovered");