jquery - 点击切换div颜色

Question

我有以下 JS:

 $(".place").mouseover(function () {
            $(this).css('background-color', '#00cc00'); // green color
        }).mouseout(function () {
            $(this).css('background-color', '#336699'); // light blue color
        });

当鼠标悬停时，div 变为绿色。我想要当用户点击 div 然后 div 保持绿色。如果他们再次单击，则将颜色设置为浅蓝色。我该怎么做？
谢谢。

Answer 1

使用.toggleClass()函数代替。

用法:

$(".place").click(function () {
   $(this).toggleClass("green");
});

最初提供 background-color: #336699 并稍后使用 toggleClass() 覆盖此样式。

您的 CSS 应如下所示。

.place { background-color: #336699; }
.place:hover, .place.green { background-color: #00cc00; }

实际操作 here .

更新:

---

更新 1:Demo绿色悬停。