Javascript-div内的div问题

Question

当鼠标移出id1时，我需要hideall()函数才能执行。 使用下面的代码，它可以正确调用hideall() ，但是当鼠标移出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

Answer 1

Internet Explorer中有一个专有事件称为“鼠标离开”，我相信这正是您要寻找的。 不幸的是，这并不适用于所有浏览器。 我建议您使用jQuery之类的JavaScript库。 它内置了事件。有关详细信息，请参见http://api.jquery.com/mouseleave/ 。 因此，您可能想要的是这样的东西：

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

Answer 2

改编我以前有的另一个答案：

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