如何一次将 class 添加到一个 div Jquery

Question

我想使用 jquery hover() 将 addClass("animated") 一次添加到一个元素当用户悬停时不是所有具有 class .animated 的元素在父元素上。

$(document).ready(function(){
    $(".animateDiv").hover(function() {
      $('.animated').addClass('rubberBand');
    }, function() {
      $('.animated').removeClass('rubberBand');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="animateDiv">
  <h3 class="animated">Turn up summer.</h3>
  <h4>Box 1</h4>
</div>
    
<div class="animateDiv">
  <h3 class="animated">Turn up summer.</h3>
  <h4>Box 2</h4>
</div>

<div class="animateDiv">
  <h3 class="animated">Turn up summer.</h3>
  <h4>Box 3</h4>
</div>

<div class="animateDiv">
  <h3 class="animated">Turn up summer.</h3>
  <h4>Box 4</h4>
</div>

那么……我如何在用户悬停时一次仅将 class 应用于一个框？

Answer 1

$('.animated', this).addClass('rubberBand');

Answer 2

$(this) 范围将限制在悬停的 div 范围内。这也假设 .animated 在 .animatedDiv.

内

$(document).ready(function(){
  $(".animateDiv").hover(function() {
    $(this).find('.animated').addClass('rubberBand');
  }, function() {
    $(this).find('.animated').removeClass('rubberBand');
  });
});

Answer 3

你可以这样使用

    <div class="animateDiv">
      <h3 class="animated">Turn up summer.</h3>
      <h4>Box 1</h4>
    </div>


    <div class="animateDiv">
      <h3 class="animated">Turn up summer.</h3>
      <h4>Box 2</h4>
    </div>

    <div class="animateDiv">
      <h3 class="animated">Turn up summer.</h3>
      <h4>Box 3</h4>
    </div>

    <div class="animateDiv">
      <h3 class="animated">Turn up summer.</h3>
      <h4>Box 4</h4>
    </div>

jQuery

    <script>
    $(document).ready(function(){
        $('.animateDiv').hover(function(){
            $(this).find('.animated').addClass('rubberBand')
            $(this).siblings().find('.animated').removeClass('rubberBand')
        })
     });
    </script>

Answer 4

或者你可以保持简短（呃）。除非您计划有不同的输入和输出，否则无需扩展悬停。

$(document).ready(function(){
   $(".animateDiv > .animated").hover(function() { $(this).toggleClass('rubberBand');});
});

如何一次将 class 添加到一个 div Jquery

how to add class to one div at a time Jquery

html

javascript

css

jquery

animate.css