jquery - toggle div color on click

Question

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 1

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 .