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

时，我希望动态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');
});

Answer 2

试试这个：

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

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

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

如何使用jQuery添加悬停类

2 个答案: