jquery - 我想在 div 中选择一个当前的 div 并在 jquery 中更改它的背景颜色

Question

我有这个 html 内容，我想使用 jquery 将鼠标悬停在其中时更改当前 div 的颜色。

CSS

.content{
  background-color:#f1f1f1;
  width:100px;
  height:100px;
}

HTML

<div class="content">
        First
</div>
<div class="content">
        Second
</div>
<div class="content">
        Third
</div>

我尝试过这段代码，但没有成功。

jQuery

$(document).ready(function () {
    var color = $(".content").css("background-color");
    $(".content").hover(function () {
        $(".content").closest().css("background-color", "#F9FAF4");
    }, function () {
         $(this).closest().css("background-color", color);
    });
});

Answer 1

您可以将脚本缩短为简单的内容:

  $(".content").hover(function() {
      $(this).toggleClass("backGround");
  });

带有一些CSS:

.backGround {
    background-color: #F9FAF4;
}

Here is an example