jquery - 如何使用 jQuery 添加悬停类

Question

我尝试为所有 <div> 实现页面加载时的效果。

 jQuery('.postCenter').addClass("hiddenClass").viewportChecker({
        classToAdd: 'visibleClass animated bounce',
        offset: 200
       });

现在这仅在页面加载时才起作用。当我将鼠标悬停在 <div> 上时，我需要相同的效果

我尝试过这个，但没有成功。

$('.nom-img').hover(function(){

    $('.tag-nom').removeClass('animated');
    $('.tag-nom').removeClass('bounce');

    $('.tag-nom').addClass('animated');
    $('.tag-nom').addClass('bounce');
});

我的标记是这样的:

<div class="col-md-4 col-sm-4 col-xs-12 postLeft">
   <h2>Topeka, Kansas</h2>
   <div class="nom-img">
     <a href="topeka.html"><img src="img/xxxxxx"></a>
   </div>
   <div class="tag-nom postCenter"> <a href="#"><img src="XXX"></a>
      <h4><a href="#">vsdvsdvsdvsdv</a></h4>
   </div>
</div>

我要tag-nom当我悬停 div nom-img 时动画

我有 6 个这样的列。所以只有对应的tag-nom应该在悬停时动画。我怎样才能做到这一点？

Answer 1

您需要修改悬停功能以接受两种方法，即分别是 mouseenter 和 mouseleave。您还需要定位 .tag-nom 这是悬停元素的下一个同级元素:

$('.nom-img').hover(function(){
  $('.tag-nom').not($(this).next()).removeClass('animated bounce')
  $(this).next().addClass('animated bounce');
},function(){
  $(this).next().removeClass('animated bounce');
});