我尝试为所有 <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
应该在悬停时动画。我怎样才能做到这一点?
最佳答案
您需要修改悬停功能以接受两种方法,即分别是 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');
});
关于jquery - 如何使用 jQuery 添加悬停类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27274414/