Question

我试图对页面上的所有元素运行动画悬停效果。我的问题是，当我超越它们中的任何一个时，它会激活它们。

$('div.anime').hover( function() {
$('.box').animate({'do something cool'});
});

所有框都具有相同的班级anime。所以，我只想弄清楚当你将鼠标悬停在一个上时如何仅动画，而不给它们提供你知道的所有单独的课程？

我知道这是一个简单的问题，但我还在学习jQuery的方法:)所以请耐心等待我

这是HTML：

<div class="anime">

<div class="box">Hey show me! Im cool!</div>
</div>

Answer 1

一般来说，您可以通过this关键字来指定要悬停的项目，然后通过遍历DOM树。

例如

给出以下HTML

this

这个javascript（使用jQuery）只选择<div class="anime"> <p>other stuff</p> <div class="box"> <p>content</p> </div> </div>中包含的.box，因为我正在使用.find()函数来遍历与{相对于{的DOM {1}}（悬停的元素）。

.anime

您可以阅读更多内容并查找Traversing the DOM here.

的更多功能

Answer 2

尝试使用每个jquery

的函数

$( "div.anime" ).each(function(){

$(this).hover( function() {
   $(this).find('.box').animate({'do something cool'});
});

});

Answer 3

在javascript中，您可以使用“this”捕获事件的目标。使用'this'会将animate方法限制为正在执行的对象。

$('div.anime').hover(function(e){
   $(this).animate({'do something cool'});

}, function(){
   // dont forget on mouseout
   $(this).animate({'return to normal state'});

})

Answer 4

$('div.anime .box').hover( function() {
$(this).animate({'do something cool'});
});

具有相同类的对象上的动画，一次一个

4 个答案: