鼠标悬停事件处理程序在我只想要一个 div 时会弹出两个 div

Question

我正在尝试为一张图片做一个鼠标悬停事件，当您将鼠标悬停在图片上时，div 会出现并在图片上动画化。但是，当我将鼠标悬停在鼠标悬停时，当我一次只想要一张图片时，它会为单独的图片显示两个div。这是我的代码。第一部分是鼠标悬停。其次是鼠标退出。

$('.portfolio img').mouseover(function(){
    $(this).css('cursor', 'pointer');
    $(this).parent().find('img:first').stop().animate({opacity:1}, 800, function() {
          $("div.folio").animate({ height: '+=25px', top: '-=24px' }, 100, function() {
                $("div.folio span").animate({ opacity: 1 }, 500);
          });
    });
});
$('.img_grayscale').mouseout(function(){
       $(this).stop().animate({opacity:0}, 800, function() {
            $("div.folio span").animate({ opacity: 0 }, 500, function() {
                $("div.folio").animate({ height: '-=25px', top: '+=24px' }, 100);
                $("div.folio").css('top', '-9px');
            });
        });
}); 
        <div class="portfolio">
            <h2>The Portfolio</h2>
            <p class="slideTwo">Check out some of our recent projects.</p>
            <ul>
                <li><img src="portfolioOne.jpg"></img><div class="folio"><span>thesite.com</span></div></li>
                <li><img src="portfolioOne.jpg"></img><div class="folio"><span>mysite.com</span></div></li>
            </ul>
        </div>

Answer 1

使用 jQuery 的 $("div.folio") 将返回带有"folio"类的所有div。 由于您在两个图像上都看到了此动画，而不仅仅是您鼠标悬停的图像，因此我假设它们在要动画的div 上都具有相同的类。 为了只对一个进行动画处理，在使用jQuery选择它时，你需要更具体。 在div 的路径上包含 $（this） 进行动画处理通常有效，但如果没有相应的 HTML，我无法告诉您确切的代码。

Answer 2

您需要通过从事件处理程序返回"false"来取消冒泡事件。

$('.portfolio img').mouseover(function(){
    // Your logic here...
    return false;
});

Answer 3

我对此有一些担忧，这些担忧可能会也可能不会有问题，具体取决于您尚未显示的其他情况。

• 您正在jQuery onmouseover函数中执行$(this).parent().find('img:first')，其中$(this)应该已经表示您关心的img。您是否出于某种原因发现这是必要的？
• 您可以在选择器中更具体。尝试做$(".portfolio>ul>li>img")
• img_grayscale在您的问题中的标记中只提到过一次，所以我不确定该类是如何应用的，但我假设它确实如此。
• 您可以直接将类portfolio（或一些唯一标识符）添加到图像中，并且可能更容易弄清楚它无法按预期工作的确切原因。然后，您的鼠标悬停选择器可能只是$(".specialClass")

你绝对应该尝试发布一个 jsfiddle.net;你可以从网上借用任何两张图片进行测试。

Answer 4

设法弄清楚了这个问题。我必须通过以下代码基本上横向 DOM。我引用了图像，然后转到父元素，然后转到 DOM 中的下一个元素，这是我的div.folio。然后我去找那个物体的孩子把它淡入。我基本上在鼠标输出时反向做了同样的事情。

            $('.portfolio img').mouseover(function(){
                $(this).css('cursor', 'pointer');
                $(this).parent().find('img:first').stop().animate({opacity:1}, 800, function() {
                    $(this).parent().next().animate({ height: '+=25px' }, 100, function() {
                        $(this).children().animate({ opacity: 1 }, 100);
                    });
                });
            });
            $('.img_grayscale').mouseout(function(){
                $(this).stop().animate({opacity:0}, 800, function() {
                        $(this).parent().next().children().animate({ opacity: 0 }, 100, function() {
                            $(this).parent().animate({height: '-=25px' }, 100);
                    });
                });
            });