显示各个元件独立地使用每个方法(show individual elements independe

尝试使用各种功能的同时，显示只有一个元素，但不知道怎么去匹配与第一项相关联的项目，从而将鼠标悬停在第一个“hoverMe”它只显示第一SHOWME等

这里是我到目前为止，我觉得我能做到这一点真的混乱的方式，但不知道是否有一个干净的方式来做到这一点。

http://jsfiddle.net/Pm2vP/

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

Answer 1:

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

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

Answer 2:

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

});

Answer 3:

对于类的每个项目hoverMe ，这段代码中找到与悬停项目的子showMe类，并让他们fadeIn()和fadeOut()

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

Answer 4:

我建议：

$('.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提琴演示。

这不，虽然使用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提琴演示。

参考文献：