Question

在这种情况下，当我将鼠标悬停在任意列上时，页面中的所有.p1元素都会淡入。我怎么才能只有我目前正在悬停的元素淡入而不是休息？

$('.column1, .column2, .column3, .column4, .column5').mouseenter(function() {
    $(".p1").fadeIn(200);
    $(this).animate({
        height: '100%'
    });
});


$('.column1, .column2, .column3, .column4, .column5').mouseleave(function() {
    $(".p1").fadeOut(200);
    $(this).animate({
        height: '100px',
    }); 
});

Answer 1

使用this关键字引用触发事件的元素，如下所示：

$('.column1, .column2, .column3, .column4, .column5').mouseenter(function() {
   $(this).fadeIn(200).animate({
       height: '100%'
    });
});

$('.column1, .column2, .column3, .column4, .column5').mouseleave(function() {
    $(this).fadeOut(200).animate({
        height: '100px'
    }); 
});

另请注意，您可以使用hover()处理程序和fadeToggle()在所有元素上使用公共类来缩短代码。试试这个：

$('.column').hover(function() {
    $(this).fadeToggle(200).animate({
        height: $(this).height() == 100 ? '100%' : '100px'
    }); 
});

选择单个元素的正确语法是什么？

1 个答案: