如何使用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'); 
}); 

Answer 2

试试这个：

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

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

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