jquery - 悬停、鼠标悬停和鼠标移出

Question

我正在学习和使用 jQuery，并且想要显示某些元素的删除图标。

我有一个外部主 div，其中包含许多元素的包装器。在元素包装器内部，我想当用户将鼠标悬停在元素包装器上时显示删除图标，并在用户移出元素包装器时将其删除。

使用mouseover和mouseout ，我可以显示并删除该图标，但是当我将鼠标移到删除图标上时，它就会被删除，因为它会触发 mouseout元素包装器的事件。我做错了什么？

Answer 1

有两种选择:

1. CSS 的 :hover 伪类(但前提是您不必支持 IE6)
2. mouseenter 和 mouseleave 事件

CSS 的 :hover 伪类

如果不需要 IE6 支持，您可以使用 :hover 让浏览器完成所有工作。伪类:

/* Don't show `child` elements inside `parent` elements...*/
parent child {
    display: none;
}

/* ...unless the `parent` element is being hovered over */
parent:hover child {
    display: block; /* or inline-block or whatever */
}

Live example

但是，除了 a 元素之外，IE6 不支持 :hover 伪类。 IE7+ 和所有最新的其他浏览器都是如此。

mouseenter 和 mouseleave 事件

如果 CSS 不能为您执行此操作，您需要查找 mouseenter 和 mouseleave 事件，这些事件是 IE 特定的，但由 jQuery 在所有其他平台上模拟浏览器。 jQuery 甚至还有一个方便的功能，hover ，用于将处理程序连接到这两个事件，以便您可以轻松完成您想要做的事情。

$(...your parent element...).hover(
    function() {
        // Called when the mouse enters the element
    },
    function() {
        // Called when the mouse leaves the element
    }
 );

这是完整的live example :

HTML:

<div>Hover over me <span class='del'>[X]</span></div>
<div>And me <span class='del'>[X]</span></div>
<div>And me <span class='del'>[X]</span></div>

使用 jQuery 的 JavaScript:

$('div').hover(
  function() {
    $(this).find('span.del').show();
  },
  function() {
    $(this).find('span.del').hide();
  }
);

您在使用 mouseover 和 mouseout 时遇到问题的原因是它们冒泡，因此您的 mouseout 处理程序当您的鼠标移动到删除元素时，您的父元素上会看到底层元素出现冒泡的mouseout。 mouseenter 和 mouseleave 不会冒泡，因此它们不存在这个问题。