Question

我有一个问题，我想在悬停时将一个类添加到下面的一个div节目中：

<div class="container">
  <div class="section">Stuff</div>
  <div class="section">Stuff</div>
  <div class="section">Stuff</div>
  <div class="section">Stuff</div>
  <div class="section">Stuff</div>
</div>

此代码将所有类添加到它们中，如何才能使它成为您正在悬停的类？我读了jquery .next，但也无法让它工作。注意：部分div来自一个循环并且都是相同的类名，我无法改变它。

jQuery是：

jQuery(".container .section").hover(
  function() {
    jQuery(".section").addClass("selected");
  },
  function() {
    jQuery(".section").removeClass("selected");
  }
);

小提琴@ http://jsfiddle.net/8juoy2vz/

Answer 1

试试这个，（$(this)引用当前元素，在我们的例子中它将是.section之一）

jQuery(".container .section").hover(
    function() {
        $(this).addClass("selected");
    },
    function() {
        $(this).removeClass("selected");
    }
);

Example

Answer 2

使用jQuery(this)代替jQuery(".section")：

jQuery(".container .section").hover(function () {
    jQuery(this).addClass("selected");
}, function () {
    jQuery(this).removeClass("selected");
});

jQuery(".container .section").hover(function () {
    jQuery(this).addClass("selected");
}, function () {
    jQuery(this).removeClass("selected");
});

.selected {
    color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
    <div class="section">Stuff</div>
    <div class="section">Stuff</div>
    <div class="section">Stuff</div>
    <div class="section">Stuff</div>
    <div class="section">Stuff</div>
</div>

jQuery(".section")选择具有类部分的所有元素，而jQuery(this)仅指向被引用的元素。

Answer 3

为什么不在CSS中全部完成？

你可以这样：

.section:hover {
  // Whatever you had in the .selected class
}

这是一个演示：http://jsfiddle.net/8juoy2vz/3/

div上的addClass当其他div具有相同的类时，你正在盘旋

3 个答案: