Question

首先，免责声明 - 我只是从jQuery开始。我为自己的无能而道歉。 :)

我的问题是我试图在页面上的一堆独立元素上使用jQuery翻转效果。现在，当我鼠标悬停在一个上面时，它们都会立即生效，因为它们具有相同的类名，而jQuery正在选择所有这些类。我知道我可以为每个使用不同的名称，并为每个类写一个单独的jQuery，但是有更好的方法吗？我计划拥有许多这些元素。

无论如何，一张图片胜过千言万语。在这里查看我的测试页面的来源：Click Here将鼠标悬停在“测试”图像上。我希望效果只适用于鼠标悬停的效果。

这是我的新手jQuery：

    $(document).ready(function(){

$('.box').hover(function() {
 $('.rollover').fadeIn('slow');
 $('.description').fadeIn('fast');
});

$('.box').mouseleave(function() {
 $('.rollover').fadeOut('slow');
 $('.description').fadeOut('fast');
});


});

Answer 1

$('.box').hover(function() {
   $(this).next('.rollover').fadeIn('slow');
   $(this).find('.description').fadeIn('fast');
}, function() {
   $(this).next('.rollover').fadeOut('slow');
   $(this).find('.description').fadeOut('fast');
});

.hover()方法接受两个函数来触发mouseenter和mouseleave。

在每个函数中，this关键字指的是接收事件的.box元素。然后，您使用.find()获取嵌套.description和.next()以获取相邻的兄弟.rollover。

在您的情况下，如果您愿意，可以使用.siblings('.rollover')代替.next()。

http://api.jquery.com/siblings/

Answer 2

如果我可以一次选择一个，我想我可以只将效果应用于他们的孩子。我只是希望你能告诉jquery只选择你的鼠标，而不说明ID或类......

如何拥有jQuery效果的多个实例

2 个答案: