Question

这是结构：

<div class="features-image">
</div>
<div class="features-image">
</div>
<div class="features-image">
</div>

我已经制作了一个jQuery函数，如果特征图像处于悬停状态，就会发生一些事情。

我的问题是我有3个特色图像，当我的鼠标悬停第一个特色图像时，第二个和第三个的结果也会得到相同的效果。

我希望如果第一个特征图像处于悬停状态，则第二个和第三个不会复制第一个图像的效果。

代码：

jQuery(document).ready(function() { 
    jQuery('.features-image').hover(function(){ 
        jQuery(this).animate({
            top:'95px',
            h‌eight:'135px'
        },500); 
    },function(){ 
        jQuery('.features-content').animate({
            top:'170px',
            height:'60px'
        },500);
    }); 
});

Answer 1

当您定义类似悬停的内容时，使用 this 来引用当前元素 -

$('.features-image').hover(function() {
    $(this) // mouseover do stuff
}, function {
    $(this) // mouseout do stuff
});

Answer 2

使用this指针，该指针指向当前div：

$(function(){

   $('.features-image').hover(function(){

         //do something with $(this), for example:

         $(this).stop(true, true).fadeIn(); //mouseover

   }, function(){

        $(this).stop(true, true).fadeOut(); //mouseout

   });

});

如何在具有相同类名的多个类中选择1个类？

2 个答案: