Question

尝试使用每个功能一次只显示一个元素，但不确定如何获得与第一个项目相关联的匹配项目，以便将鼠标悬停在第一个＆＃34; hoverMe＆＃34;它只显示第一个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();
    }
  );
});

Answer 1

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

Answer 2

我建议：

$('.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的原始演示不同）。

但是，如果你想继续使用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

参考文献：

Answer 3

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

});

Answer 4

对于课程为hoverMe的每个项目，此代码会找到包含showMe课程的悬停项目的子项，并将其设为fadeIn()和fadeOut()。

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

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

4 个答案: