Question

我有这段代码：

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

我有两个DIV和一个图像。

我的问题是，当你将鼠标悬停在.changePic（在.userPic内）时，mouseout事件将会触发，图像将不会显示。

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

怎么做？

HTML code：

 <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 冒泡，因此当他们触发您正在观看的元素中的元素时，您会在正在观看的元素中接收它们。它可以很快变得复杂。当鼠标进入或离开有问题的特定元素（它们不会冒泡）时，会发生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");
  });

});

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"。）

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

1 个答案:

使用jQuery

使用CSS