Question

Stack Fans，

我有一个div，当你把鼠标移开时，我希望它隐藏起来。问题是，当鼠标光标移动到该div中的文本时，onmouseout触发。我看到了onmouseleave函数，这正是我想要的，但它只是一个IE触发事件。该修复程序应该可以在IE / FF / Opera / Chrome / Safari中使用。

使用以下代码，有一种简单的方法可以解决此问题：

<style>
  #mydiv{background-color:orange;width:600px;height:200px;}
</style>

<div id="mydiv" onmouseout="this.style.display='none'">
  <ul>
    <li>some text</li>
    <li>more stuff</li>
  </ul>
</div>

我查了一些其他类似的帖子，但我没有看到这样的问题。

为了澄清，当您将鼠标悬停在div中的文本上时，它当前隐藏了div。我希望它只在鼠标离开div时触发隐藏。

谢谢，

亚当

Answer 1

Mouseenter和mouseleave

仅限Microsoft的解决方案。它创造了两个新的事件mouseenter和mouseleave。它们与mouseover和mouseout几乎相同，只是它们不会对事件冒泡做出反应。因此，他们将整个HTML元素注册为一个实体块，并且不会对块内发生的鼠标移动和出现做出反应。

因此，使用这些事件也解决了我们的问题：他们只对他们注册的元素上的鼠标/出局作出反应。

At the moment these events are only supported by Explorer 5.5 on Windows and higher.  
Maybe the other browser vendors will copy these events.

参见参考：http://www.quirksmode.org/js/events_mouse.html

因此，您需要Jquery使其与所有浏览器兼容。

使用Jquery查看演示：http://jsfiddle.net/rathoreahsan/R4z3s/

<强> HTML：

<div id="mydiv">
  <ul>
    <li>some text</li>
    <li>more stuff</li>
  </ul>
</div>

<强> Jquery的

$('#mydiv').mouseleave(function() {   
    $(this).css({"display" : "none"})
});

Answer 2

我真惭愧......好好生活和学习......

preventing mouseout event for child node

该帖子有答案。希望它可以帮到你。

onmouseout由文本触发 - onmouseleave（即唯一）功能首选

2 个答案: