jquery – 鼠标悬停,鼠标悬停和鼠标

我正在学习和使用jQuery,并希望为某些元素显示一个删除图标.

我有一个外部主div,其中包含元素的包装数量.在元素包装器中,当用户将鼠标悬停在元素包装器上时,我想显示一个删除图标,并在用户从元素包装器移出时将其删除.

使用鼠标悬停和鼠标悬停,我可以显示和删除图标,但一旦我将鼠标移动到删除图标上,它将被删除,因为它触发元素包装器的mouseout事件.我究竟做错了什么？

解决方法

你的两个选择：

> CSS的：hover伪类(但是只有当你不必支持IE6)
> 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

然而,IE6不支持：hover伪类,除了元素. IE7和所有最近的其他浏览器.

mouseenter和mouseleave事件

如果CSS没有为您做,那么您正在寻找的是鼠标和鼠标事件,这些事件是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>

JavaScript使用jQuery：

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

你的鼠标悬停和鼠标悬停问题的原因是它们会起泡,因此当您的鼠标移动到删除元素时,您的父元素上的mouseout处理程序会从底层元素看到冒泡的鼠标. mouseenter和mouseleave不要泡,所以他们没有这个问题.