关于DIV于onmouseout事件的问题

Question

  <script>
   function mode()
   {
   alert("123!");
   }
   </script>
 
   <div id="a"  style="width:800px; height:800px; background-color:Black" onmouseout="javascript:hidediv()" >
    <div id="b" style="width:200px; height:200px; background-color:Blue;" ></div>
    <div id="c" style="width:100px; height:100px; background-color:Gray; margin:200px 0 0 300px;;" ></div>
   </div>
我想要的效果是当鼠标离开黑色的大DIV的时候才会执行onmouseout事件，但实际上当鼠标移动到a里面的b或者c都会触发，可否有办法实现我想要的效果呢？

Answer 1

<script type="text/javascript">
$("#a").hover(, function () {
   alert('dfdsfds');
  }
)
</script>
 
 <div id="a"  style="width:800px; height:800px; background-color:Black" >
    <div id="b" style="width:200px; height:200px; background-color:Blue;" ></div>
    <div id="c" style="width:100px; height:100px; background-color:Gray; margin:200px 0 0 300px;;" ></div>
   </div>

Answer 2

<script>
        function mode(obj, e) {
            if (e.currentTarget) {
                if (e.relatedTarget != obj)//FF {
                    if (obj != e.relatedTarget.parentNode) {
                        alert(1);
                    }
                }
            } else {
                if (e.toElement != obj)//IE {
                    if (obj != e.toElement.parentNode) {
                        alert(1);
                    }
                }
            }
        }   </script>
   <div id="a"  style="width:800px; height:800px; background-color:Black" onmouseout="mode(this,event)" >
    <div id="b" style="width:200px; height:200px; background-color:Blue;" ></div>
    <div id="c" style="width:100px; height:100px; background-color:Gray; margin:200px 0 0 300px;;" ></div>
   </div>

Answer 3

<script>
var contains =document.defaultView? function (a, b) { return !!( a.compareDocumentPosition(b) & 16 ); }: function (a, b) { return a != b && a.contains(b); }

function mode(obj, e) {
if(!contains(obj,e.target||e.srcElement))return;
alert(123)
}   </script>
   <div id="a"  style="width:800px; height:800px; background-color:Black" onmouseout="mode(this,event||window.event)" >
    <div id="b" style="width:200px; height:200px; background-color:Blue;" ></div>
    <div id="c" style="width:100px; height:100px; background-color:Gray; margin:200px 0 0 300px;;" ></div>
   </div>