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

Answer 2

在任何事件处理程序中，您可以通过$(this).丰富触发事件的当前对象。因此，如果您只需将$(".content").closest()更改为$(this)和$(this).closest()，它就可以正常工作到$(this)：

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

以下是演示：http://jsfiddle.net/Lgd1sba4/2/

Answer 3

试试这个：

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

Answer 4

您需要使用$(this)来选择当前悬停的项目，例如：

JS Fiddle Demo

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

4 个答案: