使用每种方法独立显示各个元素

试图一次只显示一个元素使用每个函数，但不知道如何获得与第一个项目相关联的匹配项目，以便您将鼠标悬停在第一个“hoverMe”时，它只显示第一个showMe和所以对使用每种方法独立显示各个元素

这是我到目前为止，我认为我可以做到这一点非常混乱的方式，但不知道是否有一个干净的方式来做到这一点。

<p class="hoverMe">Hover me<span class="showMe">show me</span></p> 
<p class="hoverMe">Hover me<span class="showMe">show me</span></p> 
<p class="hoverMe">Hover me<span class="showMe">show me</span></p> 

$('.showMe').hide(); 

$(".hoverMe").each(function(){ 
    $(this).hover(
    function() { 
     $(".showMe").fadeIn(); 
    }, 
    function() { 
     $(".showMe").fadeOut(); 
    } 
); 
});

来源

2013-05-09 lukasz

的this关键字将引用函数内部当前悬停的元素，并将其作为在选择范围内，您只能选择当前悬停的段落内的跨度。

.hover()是.on('mouseenter mouseleave'的快捷方式，我发现它更容易直接使用，并且fadeToggle()将切换衰落效果。

$('.showMe').hide(); 

$(".hoverMe").on('mouseenter mouseleave', function() { 
     $(".showMe", this).fadeToggle(); 
});

FIDDLE

编辑：

为了确保衰落切换的正确（这几乎是一个问题），你可以创建自己的切换功能：

$('.showMe').hide(); 

$(".hoverMe").on('mouseenter mouseleave', function(e) { 
     $(".showMe", this)[e.type=='mouseenter'?'fadeIn':'fadeOut'](); 
});

来源

2013-05-09 22:12:18 adeneo

啊，我觉得我最喜欢这个。它非常干净。我正在阅读.on方法和fadeToggle，但没有意识到这些。谢谢。 – lukasz 2013-05-09 22:33:01

有一件事我会对这种方法持谨慎态度，即褪色与mouseenter/mouseleave状态不同步。在正确的情况下，您可能会意外地使它在mouseleave上可见并且在mouseenter上不可见。只是要小心。 – Corion 2013-05-11 18:26:27

@Corion - 比较容易解决，请参阅我的编辑。 – adeneo 2013-05-11 18:56:34

我d建议：

$('.showMe').hide(); 

$('.hoverMe').on('mouseenter mouseleave', function(e){ 
    // looks within the hovered-over element: 
    $(this) 
     // to find the '.showMe' element 
     .find('.showMe') 
     // stops all currently-running animations 
     .stop(true, true) 
     // fades the discovered '.showMe' element(s) in, or out 
     // depending on whether the mouse entered, or left, the '.hoverMe' element    
     .fadeToggle(e.type == 'mouseenter'); 
});

JS Fiddle demo。

尽管如此，使用jQuery 1.9（与原来的演示不同，它使用1.6.4）。

但是，如果你想留下wtih的jQuery 1.6.4，您可以使用delegate()，虽然这是一个有点难看，可惜的是：

$('.showMe').hide(); 

$('.hoverMe').parent().delegate('.hoverMe', 'mouseenter mouseleave', function(e){ 
    $(this).find('.showMe').stop(true, true).fadeToggle(e.type == 'mouseenter'); 
});

JS Fiddle demo。

参考文献：

来源

2013-05-09 22:17:54

我并没有坚持1.6，它只是目前正在使用的项目。绝对能够升级。宁愿更清晰的语法。我现在就试试这个。 – lukasz 2013-05-09 22:29:40

$('.showMe').hide(); 
$(".hoverMe").mouseover(function(){ 
$('.showMe').fadeOut(); 
$(this).find(".showMe").fadeIn(); 

});

来源

2013-05-09 22:22:46

对于hoverMe类的每个项目，这些代码中找到与showMe类悬停项目的孩子们，使他们fadeIn()和。

$(".hoverMe").each(function(){ 
    $(this).hover(
    function() { 
     $(this).children(".showMe").fadeIn(); 
    }, 
    function() { 
     $(this).children(".showMe").fadeOut(); 
    } 
); 
});

来源

2013-05-09 22:24:47 Corion

使用每种方法独立显示各个元素

回答

相关问题