移开层就自动隐藏，但如果层中有其它层，如何实现，有点难度

Question

要实现的功能是这样的：
移开DIV(id1)后，该DIV(id1)就自动隐藏，下面的代码可以实现这个功能：  <div id="id1" style="background-color:Red;width:100px;height:100px;" onmouseout="document.getElementById('id1').style.display='none'">
        移开我就隐藏
    
    </div>但如果DIV是不是纯文字，而是包含其它的DIV和链接文字的话，就无法实现这功能了。 <div id="id1" style="background-color:Red;width:100px;height:100px;" onmouseout="document.getElementById('id1').style.display='none'">
        <div style="height:21px;margin:0px;padding:0px;text-align:center;background-color:Red;width:100px;">
            <a href="products-content.aspx?id=97a54ff0-c19b-4dd6-a152-6a4168921317电视购物" target="_blank">电视购物</a>
        </div>
        <div style="height:21px;margin:0px;padding:0px;text-align:center;background-color:Red;width:100px;">
            <a href="products-content.aspx?id=97a54ff0-c19b-4dd6-a152-6a4168921317电视购物" target="_blank">电视购物</a>
        </div>
        <div style="height:21px;margin:0px;padding:0px;text-align:center;background-color:Red;width:100px;">
            <a href="products-content.aspx?id=97a54ff0-c19b-4dd6-a152-6a4168921317电视购物" target="_blank">电视购物</a>
        </div>
        <div style="height:21px;margin:0px;padding:0px;text-align:center;background-color:Red;width:100px;">
            <a href="products-content.aspx?id=97a54ff0-c19b-4dd6-a152-6a4168921317电视购物" target="_blank">电视购物</a>
        </div>
    
    </div>
大家可以把代码复制到HTML中试下，第二段代码就算你在红色区域中移动，也会自动隐藏，而不是等鼠标移开红色区域后再自动隐藏。
我现在就是在id1中包括有其它的层和一些链接文字，而导致等鼠标一移动就隐藏了

Answer 1

通过判断event事件的toElement是否属于DIV(id1)层内
如果属于，则不隐藏
如果不属于，则隐藏具体判断方法：
1。找toElement的父节点，判断是否是DIV(id1)
2。如果不是，则toElement的父节点赋给toElement变量
重复1。一直找到BODY

Answer 2

如果事先知道DIV(id1)层内有哪些子对象，可以固定判断toElement是否属于其中之一，如果属于，不隐藏
如果不属于，则隐藏

Answer 3

写一个方法里,分别隐藏onmouseout="mouseOut()"<script type="text/javascript">
    document.getElementById('id1').style.display='none';
    document.getElementById('id2').style.display='none';
    ...
</script>

Answer 4

需要用while判断父节点了

Answer 5

如果是隐藏外层的div,那么就全部都隐藏了

Answer 6

改一下事件处理程序就可以了：
<div id="id1" style="background-color:Red;width:100px;height:100px;" onmouseout="if (window.event.srcElement==document.getElementById('id1')) document.getElementById('id1').style.display='none';"> 
        <div style="height:21px;margin:0px;padding:0px;text-align:center;background-color:Red;width:100px;"> 
            <a href="products-content.aspx?id=97a54ff0-c19b-4dd6-a152-6a4168921317电视购物" target="_blank">电视购物 </a> 
        </div> 
        <div style="height:21px;margin:0px;padding:0px;text-align:center;background-color:Red;width:100px;"> 
            <a href="products-content.aspx?id=97a54ff0-c19b-4dd6-a152-6a4168921317电视购物" target="_blank">电视购物 </a> 
        </div> 
        <div style="height:21px;margin:0px;padding:0px;text-align:center;background-color:Red;width:100px;"> 
            <a href="products-content.aspx?id=97a54ff0-c19b-4dd6-a152-6a4168921317电视购物" target="_blank">电视购物 </a> 
        </div> 
        <div style="height:21px;margin:0px;padding:0px;text-align:center;background-color:Red;width:100px;"> 
            <a href="products-content.aspx?id=97a54ff0-c19b-4dd6-a152-6a4168921317电视购物" target="_blank">电视购物 </a> 

Answer 7

danle试了你的代码，还是有点问题，在里面移动时还是会隐藏

Answer 8

拿你的代码做了个例子，希望对lz有帮助
不过还是建议lz自己多动动手，这样遇到的问题也会多些，知识积累也快些
<div id="id1" style="background-color:Red;width:100px;height:100px;" onmouseout="mouse_out(this)"> 
        <div style="height:21px;margin:0px;padding:0px;text-align:center;background-color:Red;width:100px;"> 
            <a href="products-content.aspx?id=97a54ff0-c19b-4dd6-a152-6a4168921317电视购物" target="_blank">电视购物 </a> 
        </div> 
        <div style="height:21px;margin:0px;padding:0px;text-align:center;background-color:Red;width:100px;"> 
            <a href="products-content.aspx?id=97a54ff0-c19b-4dd6-a152-6a4168921317电视购物" target="_blank">电视购物 </a> 
        </div> 
        <div style="height:21px;margin:0px;padding:0px;text-align:center;background-color:Red;width:100px;"> 
            <a href="products-content.aspx?id=97a54ff0-c19b-4dd6-a152-6a4168921317电视购物" target="_blank">电视购物 </a> 
        </div> 
        <div style="height:21px;margin:0px;padding:0px;text-align:center;background-color:Red;width:100px;"> 
            <a href="products-content.aspx?id=97a54ff0-c19b-4dd6-a152-6a4168921317电视购物" target="_blank">电视购物 </a> 
        </div> 
    
    </div>
<script>
function mouse_out(obj)  
{
var toObj = event.toElement;
var isChild = false;
while(toObj.tagName!="BODY"){
if(toObj.id == "id1"){
isChild = true;
break;
}
toObj = toObj.parentNode
}
if(!isChild){
obj.style.display = "none";
}
}

Answer 9

果然是高手，解决问题，我很想自己多动手，可不知从哪入手和查资料。。汗呀。。刚才在尝试daniel75122的方法，都失败了。。非常感谢lihui_shine 

Answer 10

不会吧，我试了都OK呢？只不过我少复制了两个关闭签标</div></div>。但即使少这两个关闭标签，也还是离开了整个红色区域才会隐藏啊