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，悬停时为绿色。

Answer 2

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

Answer 3

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

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

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

在悬停和点击时，您可能会遇到一些问题，我不确定您希望优先考虑在分配bg颜色时采取的操作优先。

Answer 4

使用CSS来悬停，而不是jQuery：

.place {
  background-color: #336699;
}

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

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

单击时切换div颜色

4 个答案:

更新