jquery - Remove .css () jQuery when clicking on other div (addClass doesn't work properly)

Question

I am trying to create some simple buttons. I have managed to get a Jquery code which on click changes the css attributes. here the code:

>     $(document).ready(function(){ 
>       $(".but1").click(function(){
>         $(this).css("background-color","white");
>         $(this).css("font-size", "9px");
>       
>       });
>       
>     });

Now, how can I make it that it removes the code when i click on another object?

I have found this:

 $(this).css("background-color", "")

but how can I use?

I know that it can be done with something like that:

$(document).ready(function(){ 
  $(".men1").click(function(){
    $(this).addClass("my class").siblings().removeClass("my class");
  }); 
});

however, it seems that in my web i cannot get the background to work just width and height...

how can I solve this????

Answer 1

You can use "transparent" as a valid css background color, which will "remove" the color. Also, you may want to try using the #FFF hex syntax for your colors, although both white and #FFF should work. A lot of great information here, and read all the way down, because it gives the best examples towards the middle. This is what I use to fix things like this.

jQuery css()

Answer 2

The background-color and font-size properties are CSS properties. With jQuery (and the normal JavaScript object.style attributes), use the backgroundColor and fontSize properties.

Like this:

$(this).css('fontSize', 16);

$(this).css('backgroundColor', 'red');