March 15, 2012
toggle div color on click
Question by user348173
I have the following JS:
$(".place").mouseover(function () {
$(this).css('background-color', '#00cc00'); // green color
}).mouseout(function () {
$(this).css('background-color', '#336699'); // light blue color
});
When mouse is over then div become green. I want when user clicks on div then div persist green color. If they click again then set color to light blue. How can I do this?
Thanks.
Answer by Starx
Use .toggleClass() function instead.
Usage:
$(".place").click(function () {
$(this).toggleClass("green");
});
Initially give background-color: #336699 and override this style later on with the toggleClass().
Your CSS should look something like this.
.place { background-color: #336699; }
.place:hover, .place.green { background-color: #00cc00; }
See this in action here.
Updates:
Update 1: Demo with the green in hover .
