单击时切换div颜色

我有以下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; } 

在这里看到这个。

更新：

---

更新1 ：hover时绿色演示 。

Answer 2

最简单的方法是切换，也许使用这样的类：

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

默认情况下它是淡蓝色，然后单击它会切换“green-bg”类，这当然会应用绿色背景。

你可能在hover和点击时都有一些问题切换，我不确定你想要优先考虑的是在分配bg颜色时采取什么行动。

Answer 3

 $(".place").click(function(){ if($(this).css('background-color')=='#00cc00') $(this).css('background-color', '#336699'); else { $(this).css('background-color', '#00cc00'); } }); 

Answer 4

使用CSS来hover，而不是jQuery：

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

正如@Starx指出的那样，使用.click .click() 。