很急，请高手帮忙：鼠标移出这个层的时候，就触发onMouseOut事件
鼠标移出这个层的时候，就触发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";}<!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> </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> </dd> </dl> </div> </body></html>
[解决办法]
<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> </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> </dd> </dl> </div>
[解决办法]
<!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> </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> </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>
<!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> </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> </dd> </dl> </div></div></body></html>