onmouseout triggered by text - onmouseleave (ie only) functionality preferred

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

Am so ashamed... oh well live and learn...

preventing mouseout event for child node

That post has the answer. Hope it helps you.

Mouseenter and mouseleave

A solution by Microsoft only. It has created two new events mouseenter and mouseleave. They are almost the same as mouseover and mouseout except that they don’t react to event bubbling. Therefore they see the entire HTML element they’re registered to as one solid block and don’t react to mouseovers and –outs taking place inside the block.

So using these events solves our problem too: they react only to mouseovers/outs on the element they’re registered to.

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.

See the reference: http://www.quirksmode.org/js/events_mouse.html

So you need Jquery to make it compatible to all browsers.

See Demo with a 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"})
});