很急，请高手帮忙：鼠标移出这个层的时候，就触发onMouseOut事件

Question

鼠标移出这个层的时候，就触发onMouseOut事件，将层隐藏掉。 [code=JScript]
function Show_TabNav(a,b){
for(var i=0;i<2;i++){document.getElementById("tabadcontent_"+a+i).style.display="none";}
for(var i=0;i<2;i++){document.getElementById("tabadmenu_"+a+i).className="";}
document.getElementById("tabadmenu_"+a+b).className="tabchange";
document.getElementById("tabadcontent_"+a+b).style.display="block";
}function hid_TabNav(a,b){
document.getElementById("tabadcontent_"+a+b).style.display="none";
}
<ul class="I_TOP_LEFT_N_ul">                            
    <li id="tabadmenu_20" onMouseOver="Show_TabNav(2,0)" onmouseout="hid_TabNav(2,0)">切换1</li>
    <li id="tabadmenu_21" onMouseOver="Show_TabNav(2,1)" onmouseout="hid_TabNav(2,1)>切换2</li>
                           
</ul>
 <div class="I_TOP_LEFT_CONT" id="tabadcontent_20" style="display:none">
                                                        
        <dl>
           <dt>商品分类1</dt>
           <dd><a href="#" target="_blank">伊利</a>&nbsp;</dd>
       </dl>
                                                                               
  </div>
 <div class="I_TOP_LEFT_CONT" id="tabadcontent_21" style="display:none">
                                                        
        <dl>
           <dt>商品分类2</dt>
           <dd><a href="#" target="_blank">伊利</a>&nbsp;</dd>
       </dl>
                                                                               
  </div>
[/code]以上是我写的切换过程，想要表达的意思就是当鼠标移动到“切换1”显示“商品分类1”，移动到“切换2”显示“商品分类2”，以上已经实现，但是当鼠标移开“商品分类”两个层后，这两个层要自动隐藏，目前达不到这种效果，为什么？如何解决啊？本来是js新手，不懂请高手指点，本人很急，请大家帮忙

Answer 1

需要在 商品分类的 元素上也绑定 mouseout 事件 <div onmouseout="hid_TabNav(2,0)" class="I_TOP_LEFT_CONT" id="tabadcontent_20" style="display:none">
    
  <dl>
  <dt>商品分类1</dt>
  <dd><a href="#" target="_blank">伊利</a>&nbsp;</dd>
  </dl>
    
  </div>

Answer 2

但是当鼠标移开“商品分类”两个层后，这两个层要自动隐藏，目前达不到这种效果，为什么？2个层是指商品分类1和商品分类2都要隐藏？你提供的代码里总共也就只有2个<div>层标签！如果这2个都隐藏了，那还显示什么效果了，所以感觉有点疑惑！

Answer 3

我试过了，不行，我上网查了下，说onmouseout 发现它的触发太敏感，当经过层内文字链时，即触发onmousetout事件，功能不能正常显示
 我迷迷糊糊懂了，但是我的js是初学的，还有高手帮忙看看啊javascript onmouseout 解决办法
解决onMouseOut违背逻辑的办法

Answer 4

<li id="tabadmenu_20" onMouseOver='Show_TabNav("2","0")' onmouseout='hid_TabNav("2","0")'>切换1</li>
  <li id="tabadmenu_21" onMouseOver='Show_TabNav("2","1")' onmouseout='hid_TabNav("2","1")'>切换2</li>
注意单引号for(var i=0;i<2;i++){document.getElementById("tabadcontent_"+a+i).style.display="none";}
    for(var i=0;i<2;i++)
    {
          document.getElementById("tabadmenu_"+a+i).className="";
          alert(("tabadmenu_"+a+i);//增加这个语句，就知道原因了吧！
     }
    ...

Answer 5

注意： 
"tabadmenu_"+1+0和"tabadmenu_"+"1"+"0"的区别哦

Answer 6

解决HTML内部元素的Mouse事件干扰话说有一个DIV元素，其内部有一个IMG元素和SPAN元素，不用理会这两个内部元素怎么布局，这不是我要讨论的重点。为了实现一些特殊的效果，我需要利用TD的onmouseover和onmouseout事件，测试时就会发现如下的状况：当鼠标移入DIV内部时，onmouseover事件被触发；接着再鼠标移动到DIV内部的IMG或者SPAN元素之上，我们肯定不会认为这时鼠标已经移到了DIV的外边，但奇怪的是onmouseout事件触发了，而且紧接着onmouseover事件也马上被触发了。这可不是我想要的，那么怎么来&ldquo;屏蔽&rdquo;内部元素给外层元素带来的Javascript事件干扰呢？这里列举两种方法：一. setTimeout因为在鼠标移动到内部元素之上而触发了外层元素的onmouseout事件后，外层元素的onmouseover也会马上触发，所以我们只需要把外层元素的onmouseout事件需要执行的动作延迟很短的一段时间来运行，然后在onmouseover事件中再执行clearTimeout方法，这样就可以避免内部元素引起的事件干扰。具体的执行过程请看下图（纵向的虚线表示时间）： 
这是个很巧妙的的方法，因为当onmouseout触发后，实质性的方法并没有马上执行，而是要等待一小段时间。如果在这段时间里马上又触发了 onmouseover事件，那么基本上就可以肯定onmouseout事件的触发是因为内部元素的干扰了，所以在onmouseover事件中使用 clearTimeout来阻止延时的方法执行。二.contains在onmouseover时先进行如下判断，结果为true时再执行方法体：
var s = e.fromElement || e.relatedTarget ;
if(!this.contains(s)){MouseOverFunc()}在onmouseout时先进行如下判断，结果为true时再执行方法体：
var s = e.toElement || e.relatedTarget ;
if(!this.contains(s)){MouseOutFunc()}
 下面来解释一下上面两行代码的含义：在IE中，所有的HTML元素都有一个contains方法，它的作用是判断当前元素内部是否包含指定的元素。我们利用这个方法来判断外层元素的事件是不是因为内部元素而被触发，如果内部元素导致了不需要的事件被触发，那我们就忽略这个事件。event.fromElement指向触发onmouseover和onmouseout事件时鼠标离开的元素；event.toElement指向触发onmouseover和onmouseout事件时鼠标进入的元素。那么上面两行代码的含义就分别是：○ 当触发onmouseover事件时，判断鼠标离开的元素是否是当前元素的内部元素，如果是，忽略此事件；○ 当触发onmouseout事件时，判断鼠标进入的元素是否是当前元素的内部元素，如果是，忽略此事件；这样，内部元素就不会干扰外层元素的onmouseover和onmouseout事件了。但问题又来了，非IE的浏览器并不支持contains函数，不过既然我们已经知道了contains函数的作用，就可以自行添加如下的代码来为非IE浏览器增加contains支持：if(typeof(HTMLElement) != "undefined"){HTMLElement.prototype.contains = function(obj){            while(obj != null &&  typeof(obj.tagName) != "undefined")            {if(obj == this)return true;obj = obj.parentNode;}   return false;  };  }

Answer 7

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<title> new document </title>
<meta name="keywords" content="">
<meta name="description" content="">
</head>
<script type="text/javascript">
<!--
function Show_TabNav(a,b){
    for(var i=0;i<2;i++){document.getElementById("tabadcontent_"+a+i).style.display="none";}
    for(var i=0;i<2;i++){document.getElementById("tabadmenu_"+a+i).className="";}
    document.getElementById("tabadmenu_"+a+b).className="tabchange";
    document.getElementById("tabadcontent_"+a+b).style.display="block";
}function hid_TabNav(a,b){
    document.getElementById("tabadcontent_"+a+b).style.display="none";
}//-->
</script>
<style type="text/css">
.I_TOP_LEFT_N_ul li{float:left; }
</style>
<body>
<ul class="I_TOP_LEFT_N_ul">   
  <li id="tabadmenu_20" onMouseOver="Show_TabNav(2,0)" onmouseout="hid_TabNav(2,0)">切换1</li>
  <li id="tabadmenu_21" onMouseOver="Show_TabNav(2,1)" onmouseout="hid_TabNav(2,1)">切换2</li>
    
</ul>
 <div class="I_TOP_LEFT_CONT" id="tabadcontent_20" style="display:none" onMouseOver="Show_TabNav(2,0)" onmouseout="hid_TabNav(2,0)">
    
  <dl>
  <dt>商品分类1</dt>
  <dd><a href="#" target="_blank">伊利</a>&nbsp;</dd>
  </dl>
    
  </div>
 <div class="I_TOP_LEFT_CONT" id="tabadcontent_21" style="display:none" onMouseOver="Show_TabNav(2,1)" onmouseout="hid_TabNav(2,1)">
    
  <dl>
  <dt>商品分类2</dt>
  <dd><a href="#" target="_blank">伊利</a>&nbsp;</dd>
  </dl>
    
  </div>
</body>
</html>

Answer 8

<script type="text/javascript">
        function Show_TabNav(a, b) {
            for (var i = 0; i < 2; i++) { document.getElementById("tabadcontent_" + a + i).style.display = "none"; }
            for (var i = 0; i < 2; i++) { document.getElementById("tabadmenu_" + a + i).className = ""; }
            document.getElementById("tabadmenu_" + a + b).className = "tabchange";
            document.getElementById("tabadcontent_" + a + b).style.display = "block";
        }        function hid_TabNav(a, b) {
            document.getElementById("tabadcontent_" + a + b).style.display = "none";
        }    </script>  <ul class="I_TOP_LEFT_N_ul">  
  <li id="tabadmenu_20" onMouseOver="Show_TabNav(2,0)" onmouseout="timer1=setTimeout(function(){hid_TabNav(2,0)},200)">切换1</li>
  <li id="tabadmenu_21" onMouseOver="Show_TabNav(2,1)" onmouseout="timer2=setTimeout(function(){hid_TabNav(2,1)},200)">切换2</li>   
</ul>
 <div class="I_TOP_LEFT_CONT" id="tabadcontent_20" style="display:none" onmouseout="hid_TabNav(2,0)" onmouseover="clearTimeout(timer1)">   
  <dl>
  <dt>商品分类1</dt>
  <dd><a href="#" target="_blank">伊利</a>&nbsp;</dd>
  </dl>   
  </div>
 <div class="I_TOP_LEFT_CONT" id="tabadcontent_21" style="display:none" onmouseout="hid_TabNav(2,1)" onmouseover="clearTimeout(timer2)">   
  <dl>
  <dt>商品分类2</dt>
  <dd><a href="#" target="_blank">伊利</a>&nbsp;</dd>
  </dl>   
  </div>

Answer 9

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=gb2312">
        <title> new document </title>
        <meta name="keywords" content="">
        <meta name="description" content="">
    </head><style type="text/css">
 .I_TOP_LEFT_CONT { width:500px;height:300px;border:1px solid red;}
 .I_TOP_LEFT_N_ul {width:500px;border:1px solid red;list-type:none;padding:0px; height:25px;  }
    .I_TOP_LEFT_N_ul li{float:left; margin-left:30px;height:25px; }
    .tabchange{color:red;}
</style>
    <body>
        <ul class="I_TOP_LEFT_N_ul">   
  <li id="tabadmenu_20" onmouseover="Show_TabNav(2,0)" onmouseout="hid_TabNav(2,0,event,this)">切换1</li>
  <li id="tabadmenu_21" onmouseover="Show_TabNav(2,1)" onmouseout="hid_TabNav(2,1,event,this)">切换2</li>
    
</ul>
 <div class="I_TOP_LEFT_CONT" id="tabadcontent_20" style="display:none" onmouseover="Show_TabNav(2,0)" onmouseout="hid_TabNav(2,0,event,this)" >
    
  <dl>
  <dt>商品分类1</dt>
  <dd><a href="#" target="_blank">伊利1</a>&nbsp;</dd>
  </dl>
    
  </div>
 <div class="I_TOP_LEFT_CONT" id="tabadcontent_21" style="display:none" onmouseover="Show_TabNav(2,1)" onmouseout="hid_TabNav(2,1,event,this)">
    
  <dl>
  <dt>商品分类2</dt>
  <dd><a href="#" target="_blank">伊利2</a>&nbsp;</dd>
  </dl>
    
  </div>
    </body>
    <script type="text/javascript"> if(typeof(HTMLElement)!="undefined")
{
    HTMLElement.prototype.contains=function(obj){
         while(obj!=null && typeof(obj.tabName)!="undefined"){
             if(obj==this) return true;
             obj=obj.parentNode;
         }
         return false;
    };
}
function Show_TabNav(tabName,tabIndex){
if(timer!=null) {clearTimeout(timer); timer=null;}
    for(var i=0;i<2;i++){
    document.getElementById("tabadcontent_"+tabName+i).style.display = (tabIndex==i?"block": "none");
    document.getElementById("tabadmenu_"+tabName+i).className= (tabIndex==i?"tabchange":"");
  }   
}function hid_TabNav(tabName,tabIndex,e,obj)
{
e = e||event;
     e = e.toElement || e.relatedTarget ; // IE toElement  FF:relatedTarget
    if(typeof(e)!="undefined" &&!obj.contains(e)){
timer = setTimeout(function(){
     document.getElementById("tabadcontent_"+tabName+tabIndex).style.display="none";
 },500);
     
    }
    
}var timer=null;</script>
</html>

Answer 10

ls的回答都很无语啊。都停留在google的水平。。以下为最完美的解决方式。无需setTimeout，只需要最原始的mouseout就可以了<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript">
function Show_TabNav(a,b){
    for(var i=0;i<2;i++){document.getElementById("tabadcontent_"+a+i).style.display="none";}
    for(var i=0;i<2;i++){document.getElementById("tabadmenu_"+a+i).className="";}
    document.getElementById("tabadmenu_"+a+b).className="tabchange";
    document.getElementById("tabadcontent_"+a+b).style.display="block";
}function hid_TabNav(){ for (var i = 0; i < 2; i++) {
document.getElementById("tabadcontent_2" + i).style.display = "none";
}
    for (var i = 0; i < 2; i++) {
     document.getElementById("tabadmenu_2" + i).className = "";
    }
}var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
function doMouseOut(e, father) {
var event = e || window.event;
var parent = isIE ? event.toElement : event.relatedTarget;
while ( parent && parent !== father ) {
parent = parent.parentNode;
}
if ( parent !== father ) {
hid_TabNav();
}
}</script>
<style type="text/css">
.I_TOP_LEFT_CONT {
width: 500px;
height: 300px;
border: 1px solid red;
}.I_TOP_LEFT_N_ul {
margin:0px;
border: 1px solid red;
list-type: none;
padding: 0px;
height: 25px;
}.I_TOP_LEFT_N_ul li {
float: left;
margin-left: 30px;
height: 25px;
}.tabchange {
color: red;
}
.container {
border: 1px solid red;
width: 500px;
}
</style>
</head>
<body>
<div id="container" onmouseout="doMouseOut(event, this);" class="container">
<ul class="I_TOP_LEFT_N_ul">
<li id="tabadmenu_20" onMouseOver="Show_TabNav(2,0)">切换1</li>
<li id="tabadmenu_21" onMouseOver="Show_TabNav(2,1)">切换2</li>
</ul>

<div class="I_TOP_LEFT_CONT" id="tabadcontent_20" style="display: none"> <dl>
<dt>商品分类1</dt>
<dd><a href="#" target="_blank">伊利</a>&nbsp;</dd>
</dl> </div>
<div class="I_TOP_LEFT_CONT" id="tabadcontent_21" style="display: none"> <dl>
<dt>商品分类2</dt>
<dd><a href="#" target="_blank">伊利</a>&nbsp;</dd>
</dl> </div></div>
</body>
</html>

Answer 11

已经在chrome,FF,IE任意版本上测试通过

Answer 12

都停留在google的水平？？
有google的水平还会很差啊！晕倒！哈哈！

Answer 13

哈哈，我以后提问题，会尽量描述清楚的，我是学的div+css，js不懂，没有学过，以后多多像您学习

Answer 14

onMouseOver和onmouseout大小写要一样，只能用峰值，要不然会出现太敏感