show individual elements independently using each method

问题

trying to show only one element at a time using each function, but not sure how to get matching item associated with first item so as you hover over first "hoverMe" it shows only first showMe and so on

here is what I have so far, I think I can do this a really messy way, but not sure if there is a clean way to do it.

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

回答1:

The this keyword will reference the currently hovered element inside the function, and using it as context in the selector, you can select only the spans inside the currently hovered paragraph.

.hover() is a shortcut for .on('mouseenter mouseleave', and I find it easier just using that directly, and fadeToggle() will toggle the fading effect.

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

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

FIDDLE

EDIT:

To make sure the fading toggle's correctly (which rarely is a problem), you can create your own toggle functionality:

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

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

回答2:

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

});

回答3:

For each item with class hoverMe, this code finds the children of the hovered item with the showMe class and makes them fadeIn() and fadeOut().

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

回答4:

I'd suggest:

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

This does, though, use jQuery 1.9 (unlike your original demo, which used 1.6.4).

If, however, you want to stay wtih jQuery 1.6.4, you can use delegate(), though it's a little uglier, unfortunately:

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

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

JS Fiddle demo.

References: