Jquery悬停触发所有div答案

【问题标题】：Jquery hover trggering all divsJquery悬停触发所有div
【发布时间】：2014-02-25 15:08:01
【问题描述】：

请原谅我，但我还是 jQuery 的新手。我有一个网站，上面有一些高尔夫套餐。我想要做的是，当您将鼠标悬停在包裹上时，价格会在包裹图像下方下滑，并且查看包裹按钮会淡入图像顶部

我编写了一些代码，当页面上只有一个包时可以正常工作。但是当页面上有多个包时，就会出现问题。当您将鼠标悬停在其中任何一个上时，所有包都会被触发

$(document).ready(function () {
    $(".FPImage").hover(function () {
        $(".FPPrice").stop(true, true).slideDown(400);
        $(".FPFade").fadeIn('slow');
    }, function () {
        $(".FPPrice").stop(true, true).delay(10).slideUp(400);
        $(".FPFade").fadeOut('slow');
    });
});

HTML 标记是

<div class="FPBox">
    <div class="FPName">Package Name</div>
    <div class="FPImage">
        <img src="" alt="Package" border="0" />
        <div class="FPFade" style="display:none">View Package</div>
    </div>
    <div class="FPPrice" style="display:none;">Price</div>
</div>

如果我可以只针对我悬停在上面的 div 而不是所有这些 div 都触发，任何帮助将不胜感激

【问题讨论】：

标签： jquery hover mouseenter

【解决方案1】：

问题是您正在触发所有类。您只想触发 .FPImage div 中的类

试试下面的方法：

$(document).ready(function() {
    $(".FPImage").hover(function() {
      var $this = $(this);
      $this.next(".FPPrice").stop(true, true).slideDown(400);
      $this.find(".FPFade").fadeIn('slow');
    }, function() {
      var $this = $(this);
      $this.next(".FPPrice").stop(true, true).delay(10).slideUp(400);
      $this.find(".FPFade").fadeOut('slow');
    });
});

【讨论】：

【解决方案2】：

你需要找到相关的元素

$(document).ready(function () {
    $(".FPImage").hover(function () {
        $(this).next(".FPPrice").stop(true, true).slideDown(400);
        $(this).find(".FPFade").stop(true, true).fadeIn('slow');
    }, function () {
        $(this).next(".FPPrice").stop(true, true).delay(10).slideUp(400);
        $(this).find(".FPFade").stop(true, true).fadeOut('slow');
    });
});

FPPrice 元素是下一个兄弟元素，而 FPFade 是一个子元素

演示：Fiddle

【讨论】：

【解决方案3】：

以下代码行中的$(".FPPrice")：

 $(".FPPrice").stop(true, true).slideDown(400);

将选择页面上所有类FPPrice的节点。

你可能想要：

// find the parent ".FPBox" starting from the current node :
var $box = $(this).closest(".FPBox");
// search only inside this box :
$box.find(".FPPrice").stop(true, true).slideDown(400);
$box.find(".FPFade").fadeIn('slow');

【讨论】：

OP 似乎注意到了这一点并需要解决方案。