javascript - jQuery 鼠标悬停事件不起作用吗？

Question

我有这个代码:

$("document").ready( function () {
    $(".userPic").mouseover(function () {
        $(".changePic img").css("display", "block");
    })
    $(".userPic").mouseout(function () {            
        $(".changePic img").css("display", "none");             
    })
})

我有 2 个 DIV，每个 DIV 中有 1 个图像。

我的问题是，当您将鼠标悬停在 .changePic(位于 .userPic 内部)上时，mouseout 事件将触发并且图像将不会显示。

如何将鼠标悬停应用于主 DIV .userPic 内的所有元素？因此，当您将鼠标悬停在图像和 .changePic 上时，图像仍然会显示，并且 mouseout 事件不会触发。

如何做到这一点？

HTML 代码:

 <div class="accountPic">
              <div class="userPic">
              <img src="images/userPhoto.png" alt="" width="236" height="200" />   
              </div>
              <div class="changePic"><a href="editUsers.php"><img style="display: none;" src="images/config.png" alt="" width="13" height="14" border="0" /></a></div>
 </div>

Answer 1

如果您不需要支持 IE6，则无需 JavaScript 即可完成此操作(见下文)。首先，JavaScript + jQuery 的答案:

使用 jQuery

您想使用mouseenter和 mouseleave而不是 mouseover 和 mouseout。 mouseover 和 mouseout bubble，因此当它们在您正在观看的元素内的元素上触发时，您会在您正在观看的元素处收到它们。它很快就会变得复杂。 mouseenter 和 mouseleave 仅在鼠标进入或离开相关特定元素时发生(它们不会冒泡)。最初它们是 IE 特定的事件，但 jQuery 在本身不支持它们的浏览器上模拟它们。

另外，您确定确实要使用“changePic”对所有元素中的所有个img元素进行操作吗类(class)？或者只有鼠标所在的特定元素内的那些？如果是后者，您还需要更新代码以使用 find，如下所示:

jQuery(function($) {

  $(".userPic").mouseover(function () {
    $(this).find(".changePic img").css("display", "block");
  });

  $(".userPic").mouseout(function () {
    $(this).find(".changePic img").css("display", "none");
  });

});

Live example

使用CSS

但请注意，除非您需要支持 IE6，否则您可以使用 CSS 来完成此操作。只需使用样式规则:

.userPic .changePic img {
    display: none;
}
.userPic:hover .changePic img {
    display: inline;
}

Live example

无需 JavaScript。但 hover 伪类在 IE6 中不起作用，除非在 a 元素上。 (请务必删除我假设您当前在图像上的内联 style="display: none"。)