hover，鼠标hover和鼠标移出

我正在学习和使用jQuery，并希望为某些元素显示删除图标。

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

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

Answer 1

有两种选择 ：

1. CSS’s :hover伪类（但只有在你不必支持IE6时）
2. mouseenter和mouseleave事件

CSS’s :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 */ } 

实例

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

mouseenter和mouseleave事件

如果CSS没有为你做，你正在寻找mouseenter和mouseleave事件，这些事件是IE特定的，但在所有其他浏览器上由jQuery模拟。 jQuery甚至还有一个方便的function， hover ，用于连接两个事件的处理程序，这样你就可以轻松完成你想要做的事情。

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

这是一个完整的实例 ：

HTML：

 
Hover over me [X]
 
And me [X]
 
And me [X] 

使用jQuery的JavaScript：

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

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

Answer 2

你尝试过使用mouseenter和mouseleave事件吗？

Answer 3

您可以在jQuery事件onmouseover和onmouseout上应用样式。 当用户将鼠标hover在菜单上时，此事件将触发，您可以设置效果。

  
 
 learn dot net skills 
 
 Work out html 
 
 jQuery tutorials 
  

更多细节