Jquery 使用每个方法独立显示单个元素

尝试使用每个函数一次只显示一个元素，但不确定如何获得与第一个项关联的匹配项，因此当您将鼠标悬停在第一个“hoverMe”上时，它只显示第一个showMe，依此类推

到目前为止，我已经做到了这一点，我想我可以用一种非常混乱的方式来做这件事，但不确定是否有一种干净的方式来做这件事

悬停显示我
悬停显示我
悬停显示我
$（'.showMe'）.hide（）；
$（“.hoverMe”）.each（函数（）{
$（此）。悬停(
函数（）{
$（“.showMe”）.fadeIn（）；
},
函数（）{
$（“.showMe”）.fadeOut（）；
}
);
});

此关键字将引用函数中当前悬停的元素，并将其用作选择器中的上下文，您只能选择当前悬停段落中的跨距

.hover（）

是

.on（'mouseenter mouseleave'

的快捷方式，我发现直接使用它更容易，而

fadeToggle（）

将切换淡入效果

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

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

编辑：

要确保淡入切换正确（这很少是一个问题），您可以创建自己的切换功能：

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

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

我建议：

$('.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');
});

不过，这确实使用了jQuery1.9（不同于您最初的演示，它使用了1.6.4）

但是，如果您想继续使用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');
});

参考资料：

---

对于类为

hoverMe

的每个项目，此代码查找类为

showMe

的悬停项目的子项，并使它们成为

fadeIn（）

和

fadeOut（）

---

我没有坚持使用1.6，这只是项目目前正在使用的。肯定能够升级。我更喜欢更干净的语法。我现在就来试试。啊，我想我最喜欢这个。它非常干净。我正在阅读.on方法和fadeToggle，我不知道这些。谢谢。我对这种方法要小心的一件事是fade ever与mouseenter/mouseleve状态不同步。在适当的情况下，您可能会意外地导致它在mouseleve上可见，而在mouseenter上不可见。请小心。

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

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

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

});

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