Javascript jQuery鼠标悬停事件工作不正常？_Javascript_Jquery

Javascript jQuery鼠标悬停事件工作不正常？

javascript jquery

Javascript jQuery鼠标悬停事件工作不正常？,javascript,jquery,Javascript,Jquery,我有以下代码： $("document").ready( function () { $(".userPic").mouseover(function () { $(".changePic img").css("display", "block"); }) $(".userPic").mouseout(function () { $(".changePic img").css("display", "none");

我有以下代码：

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

我有两个div，每个div中有一个图像

我的问题是，当您将鼠标放在.changePic（在.userPic中）上时，mouseout事件将触发，图像将不会显示

如何将鼠标悬停应用于main 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>

如果您不需要支持IE6，您可以在不使用JavaScript的情况下实现这一点（见下文）。不过，首先，JavaScript+jQuery的答案是：

使用jQuery 您希望使用and而不是

mouseover

和

mouseout

mouseover

和

mouseout

气泡，因此当它们在您正在观看的元素中激发时，您将在您正在观看的元素处接收它们。它会很快变得复杂

mouseenter

和

mouseleave

仅在鼠标进入或离开特定元素时发生（它们不会冒泡）。最初它们是特定于IE的事件，但jQuery在本机不支持它们的浏览器上模拟它们

另外，您确定要在所有具有“changePic”类的元素中对所有

img

元素进行操作吗？或者只有鼠标所在的特定元素中的元素？如果是后者，您还需要更新代码以使用

find

，如下所示：

jQuery(function($) {

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

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

});

使用CSS 但是请注意，除非您需要支持IE6，否则您可以使用CSS来实现这一点。只需使用样式规则：

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

不需要JavaScript。但是

hover

伪类在IE6中不起作用，除了

元素。（请确保删除我假设您当前在图像上拥有的内联

style=“display:none”

。

如果您不需要支持IE6，您可以在不使用JavaScript的情况下执行此操作（见下文）。不过，首先，JavaScript+jQuery的答案是：