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;

`$("#menu a").css({ "background-color" : "transparent" });` – adeneo Nov 18 '13 at 18:59 — adeneo, Nov 18 '13 at 18:59

score 34 · Accepted Answer · answered Nov 18 '13 at 19:00

34

I believe you want something like this...

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

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

answered Nov 18 '13 at 19:00

Charlie74

2,883
15
23

score 3 · Answer 2 · answered Nov 18 '13 at 18:56

3

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");

answered Nov 18 '13 at 18:56

tymeJV

103,943
14
161
157

score 0 · Answer 3 · answered Nov 18 '13 at 19:14

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");

jQuery - remove background-color when an element is visible

3 Answers3