悬停，鼠标悬停并将鼠标移出 [英] Hover, mouseover and mouse out

问题描述

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

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

解决方案

两个选项供您

1. CSS的：hover 伪类（但前提是您不必支持IE6）
>

2. mouseenter 和 mouseleave events

CSS的：hover 伪类

您可以使浏览器如果您不需要IE6支持，请使用 ：hover 伪类：

< pre $ / *不要在`parent`元素内显示`child`元素... * /
父元素{
display：none;
}
$ b $ / * ...除非`parent`元素被悬停在* /
上：parent：hover child {
display：block; / *或内嵌块或其他* /
}


现场示例

但是，IE6不支持 ：hover 伪类除 a 元素外。 IE7 +和所有最近的其他浏览器一样。

的mouseenter 和鼠标离开 events

如果CSS不适合你，你正在寻找 mouseenter 和 mouseleave 事件，这些事件是特定于IE的，但在所有其他浏览器上由jQuery模拟。 jQuery甚至有一个方便的函数， hover ，你可以很容易地完成你想要做的事情。

  $（...你的父元素...）。hover（
 function（）{
 //当鼠标进入元素
}，
 function（）{
 //当鼠标离开元素
} 
）时调用; 
  

以下是完整的现场示例：

HTML：

 < div>将鼠标悬停在我身上< span class ='del'> [X]< / span>< / div> 
< div>和我< span class ='del'> [X]< / span>< / div> 
< div>和我< span class ='del'> [X]< / span>< / div> 
  

使用jQuery的JavaScript：

  $（'div'）。hover（
 function（）{
 $（this）.find（'span.del'）。show（）; 
 }，
 function（）{
 $（this）.find（'span.del'）。hide（）; 
} 
）; 
  

您在 mouseover 和< mouseout 就是它们 bubble ，所以您的父元素上的 mouseout 处理程序看到当鼠标移动到删除元素时，底层元素冒泡 mouseout 。 mouseenter 和 mouseleave 不要冒泡，所以它们没有这个问题。

I'm learning and using jQuery and want to display a delete icon for some elements.

I have an outer main div, which contains number of wrappers for elements. Inside the element wrapper, I want to display a delete icon when the user hovers over the element wrapper, and remove it when user moves out of the element wrapper.

Using mouseover and mouseout, I can display and remove the icon, but as soon as I move my mouse over the delete icon it is removed because it fires the mouseout event for the element wrapper. What am I doing wrong?

解决方案

Two options for you:

1. CSS's :hover pseudo-class (but only if you don't have to support IE6)
2. mouseenter and mouseleave events

CSS's :hover pseudo-class

You can make the browser do all the work if you don't need IE6 support, by using the :hover pseudo-class:

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

However, IE6 doesn't support the :hover pseudo-class except on a elements. IE7+ and all recent other browsers do.

mouseenter and mouseleave events

If CSS doesn't do it for you, you're looking for the mouseenter and mouseleave events, which are IE-specific but emulated by jQuery on all other browsers. jQuery even has a convenient function, hover, for hooking up handlers to both events so you can readily accomplish what you're looking to do.

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

Here's a complete 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 using jQuery:

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

The reason you had trouble with mouseover and mouseout is that they bubble, and so your mouseout handler on your parent element was seeing the bubbled mouseout from the underlying element when your mouse moved into the delete element. mouseenter and mouseleave don't bubble, and so they don't have that problem.

这篇关于悬停，鼠标悬停并将鼠标移出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！