日期:2014-05-16  浏览次数:20490 次

很急,请高手帮忙:鼠标移出这个层的时候,就触发onMouseOut事件
鼠标移出这个层的时候,就触发onMouseOut事件,将层隐藏掉。 
HTML code

[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新手,不懂请高手指点,本人很急,请大家帮忙

------解决方案--------------------
HTML code
<!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