悬停,鼠标悬停和鼠标移出

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 */
}

实例

但是,:hover除了a元素之外,IE6不支持伪类.IE7 +和所有最近的其他浏览器都可以.

mouseenter和mouseleave事件

如果CSS没有为你做,你正在寻找mouseenter和mouseleaveIE一样,但在所有其他浏览器上由jQuery模拟的事件和事件.jQuery甚至还有一个方便的功能,hover用于将处理程序连接到这两个事件,这样你就可以轻松完成你想要做的事情.

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

这是一个完整的实例:

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不要冒泡,所以他们没有那个问题.