Question

我只想在我的现有代码中一次淡出缩略图时，还有一个拇指悬停所有拇指悬停，是否有任何方法可以实现。悬停时，只有那个拇指有悬停效果？

演示是here!

js

 $(document).ready(function()
{    
    $(".hoverMe").hover(
      function () {
        $("div.fadeHover").fadeIn('slow');
      }, 
      function () {
        $("div.fadeHover").fadeOut('slow');
      }
    );
});

Answer 1

您需要定位相对元素

$(document).ready(function () {
    $(".hoverMe").hover(function () {
        $(this).closest('li').find(".fadeHover").fadeIn('slow');
    }, function () {
        $(this).closest('li').find("div.fadeHover").fadeOut('slow');
    });
});

的 DEMO

在这种情况下，您需要定位与悬停的fadeHover元素位于同一li的{{1}}元素

Answer 2

您可以使用$(this)定位当前的悬停.hoverMe以及 .siblings() ，仅定位悬停图片的同级.fadeHover：

$(document).ready(function () {
    $(".hoverMe").hover(function () { 
        $(this).siblings('.fadeHover').stop().fadeIn('slow');
    }, function () { 
        $(this).siblings('.fadeHover').stop().fadeOut('slow');
    });
});

您还可以使用 .stop() 来停止当前动画，以便动画的效果与预期的一致。

<强> Updated Fiddle

似乎您需要在此处定位.wrap div而不是.hoverMe图片：

$(document).ready(function () {
    $(".wrap").hover(function () { 
        $(this).find('.fadeHover').stop().fadeIn();
    }, function () { 
        $(this).find('.fadeHover').stop().fadeOut();
    });
});

<强> Fiddle Demo

Answer 3

试试这个

$(document).ready(function()
{    
    $(".hoverMe").hover(
      function () {
        $(this).parent().parent().find("div.fadeHover").fadeIn('slow');
      }, 
      function () {
        $(this).parent().parent().find("div.fadeHover").fadeOut('slow');
      }
    );
});

DEMO

jquery - 一次只淡化一个拇指

3 个答案: