Javascript - div inside div problem

I need the hideall() function to execute when the mouse moves out of id1. With the code below, it calls hideall() correctly but it calls it again when the mouse moves out of id2.

开发者_如何学运维<div id="id1" onmouseout="hideall();" style="border:1px solid red;">
          <div id="id2">This is inside id1 div</div>
</div>

http://i.stack.imgur.com/hrfsM.png

There is a proprietary event in Internet Explorer called mouse leave that I believe is exactly what you are looking for. Unfortunately, this will not work in all browsers. I recommend you use a javascript library like jQuery. It has the event built in. See http://api.jquery.com/mouseleave/ for details. So what you would probably be looking for is something like this:

<div id="id1" style="border:1px solid red;">
      <div id="id2">This is inside id1 div</div>
</div>
<script>
$(document).ready(function() {
    $('#id1').mouseleave(function() {
        hideAll();
        // Or whatever else you want to do when the mouse leaves the element.
    });
});
</script>

Adapting another answer I had previously:

<div id="id1" onmouseout="showTarget('id1',0);" onmouseover="showTarget('id1',1);" style="border:1px solid red; width: 150px; height: 100px">
 <div id="id2" onmouseover="showTarget('id1',1);" onmouseout="showTarget('id1',1);" style="background-color: red; color: white; width: 100px; height: 75px;">This is inside id1 div</div>
</div>

function showTarget(target, state) {
    switch (state) {
        case 1:
            state = 'block';
        break;
        default:
            state = 'none';
    }
    console.log(state);
    document.getElementById(target).style.display = state;
}

http://jsfiddle.net/gMpkX/