jquery - jQuery 正在触发同一类的所有元素，我怎样才能只触发一个悬停的元素？

Question

我很难理解这个问题。我有两个 div，一个完全覆盖另一个。例如，假设蓝色 div 在底部，红色 div 在顶部，其 display 属性设置为 none，我将其称为组。连续还有 5 个这样的“组”。

我希望能够将鼠标悬停在一个上，并让隐藏的红色潜水淡入。目前我下面的代码同时触发所有 5 个，因为它们都具有相同的类。

我可以用什么来解决这个问题？我尝试在悬停事件中使用“this”，但似乎无处可去。

$('.blue').mouseenter( function (){
    $(".red-rollover").fadeIn("500");
});

$('.blue').mouseleave( function (){
    $(".red-rollover").fadeOut("500");
});

编辑
对不起，我没有发布小提琴......我的错。这更好地解释了 div 布局。 http://jsfiddle.net/pjPua/

Answer 1

尝试.closest

$('.blue').mouseenter( function (){
    $(this).closest(".red-rollover").fadeIn("500");
    //OR 
   // $(".red-rollover",$(this)).fadeIn("500");
})

Answer 2

就我个人而言，我会将red-rolloverdiv 嵌套在蓝色中，然后使用.children()来激活它们，如下所示：

例如：http: //jsfiddle.net/K68F5/

你的小提琴，更新了修复：http: //jsfiddle.net/pjPua/1/

$('.blue').mouseenter( function (){
    $(this).children('.red').fadeIn("500");
});

$('.blue').mouseleave( function (){
    $(this).children('.red').fadeOut("500");
});​

Answer 3

$('.blue').mouseenter( function (){
    $(".red-rollover").eq($(this).index()).fadeIn("500");
});

$('.blue').mouseleave( function (){
    $(".red-rollover").eq($(this).index()).fadeOut("500");
});

Answer 4

如果它们相互重叠，则 div 不能淡入。您需要为要淡入的 div 的 z-index 设置动画，使其彼此重叠。

('.blue').mouseenter( function (){
    $(".red-rollover").animate({z-index: "2"}, 500);
});

$('.blue').mouseleave( function (){
   $(".red-rollover").animate({z-index: "0"}, 500);
});

应该这样做。

Answer 5

为您的选择器指定上下文，这将选择.red-rollover当前的后代.blue

$('.blue').mouseenter( function (){
    $(".red-rollover", this).fadeIn("500");
});

$('.blue').mouseleave( function (){
    $(".red-rollover", this).fadeOut("500");
});

http://jsfiddle.net/pjPua/2/