jQuery正在触发同一类的所有元素，我怎样才能解雇那个悬停的元素？

Question

我在围绕这个问题缠绕时遇到了一些困难。我有两个div，一个完全覆盖另一个。例如，让我们说蓝色div位于底部，红色div位于顶部，显示属性设置为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-rollover div嵌入蓝色内，然后使用.children()的this来激活它们，如下所示：

例如：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不能淡入淡出。你需要设置想要淡入的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/