當其他div具有相同的類時，您將鼠標懸停在div上的addClass

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");
    }
);

例

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")選擇具有類section的所有元素，而jQuery(this)僅引用被引用的元素。

Answer 3

為什么不使用CSS呢？

您可能會有這樣的事情：

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

這是一個演示： http : //jsfiddle.net/8juoy2vz/3/