在 div 上添加类当其他 div 具有相同的 class 时您正在悬停

Question

我有一个问题，我想在悬停时向下面的部分 div 之一添加 class：

<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>

此代码将 class 添加到所有代码中，我怎样才能使它成为您悬停的那个？我阅读了 jquery.next，但也无法正常工作。注意：部分 div 来自循环并且都是相同的 class 名称，我无法更改它。

jQuery 是：

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

Fiddle@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") 选择具有 class 部分的所有元素，而 jQuery(this) 仅指代被引用的元素。

Answer 3

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

你可以有这样的东西：

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

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

在 div 上添加类当其他 div 具有相同的 class 时您正在悬停

addClass on div you are hovering over when other divs have same class

javascript

jquery

addclass

class

在 div 上添加类 当其他 div 具有相同的 class 时您正在悬停

addClass on div you are hovering over when other divs have same class

javascript

jquery

addclass

class

在 div 上添加类当其他 div 具有相同的 class 时您正在悬停