jQuery - remove background-color when an element is visible

Question

I would like to remove the background-color (only the background-color) of the menu once another element is visible. I wrote this code, but it doesn't work - anybody can help?

$(function() {
if($("#wrapperHome").is(":visible")) {
    $("#menu a").css({ "background-color", "black" });  
}
});

The menu has this background style sheet information.

background:url(img/official/menu.png) center center no-repeat #f2f2f7;

Answer 1

I believe you want something like this...

$("#menu a").css("background-color", ""); 

Setting the background-color to "" essentially removes the styling, removing the color.

Answer 2

Use : not , when doing key/val CSS changes:

$("#menu a").css({ "background-color" : "black" }); 

Or since it's one value:

$("#menu a").css("background-color", "black"); 

Answer 3

You should move the style into the css for your site. This avoids having css littered through out your js and you can then re-use it.

.selected-menu-item{ // or what ever it is that has a black background
  background-color: black;
}

Then in your jquery:

$("#menu a").toggleClass("selected-menu-item");