Question

Stack Fans,

I have a div, that as you mouse off it, I want it to hide. The problem is, onmouseout triggers when the mouse cursor moves over text in that div. I saw the onmouseleave function which is exactly what I want, but it is an IE only trigger event. The fix should work in IE/FF/Opera/Chrome/Safari .

Using the following code, is there a simple way to resolve this behavior:

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

I checked some other similar posts, but I didn’t see any questions like this.

For clarification, as you mouse over the text in the div, currently it hides the div. I want it to only trigger the hide if the mouse leaves the div.

Thanks,

Adam

Answer 1

Am so ashamed… oh well live and learn…

preventing mouseout event for child node

That post has the answer. Hope it helps you.