思路是,当鼠标移动到导航菜单的某个按钮时,通过鼠标事件调用js函数,将隐藏的层的display属性设置block使其显示出来,当鼠标离开按钮时再通过鼠标事件将隐藏层的display属性设置为none,当鼠标移动到隐藏曾时,隐藏层的display属性设置为block,当鼠标离开隐藏层时隐藏层的display属性设置为none,但是当隐藏层显示出来后鼠标离开按钮移动到隐藏层时,隐藏层就消失了,哪位大侠能给个解决办法,初学js,希望大侠能详细解答.最好给个代码。

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link type="text/css" href="css/main.css" rel="stylesheet"  />
    <script type="text/javascript" src="js/header.js">
    </script>
    <title>无标题文档</title>
    </head><body>
    <center>
    <div class="main">
    <div class="header">
     <div class="logo"></div>
     <!--导航按钮-->
     <div class="leftheader">
      <div class="nvg1">
       <a href="#" onmouseover="bimg('one',1,'mft')" onmouseout="yimg('one',1,'mft')"><img src="images/nvg1.gif" id="one" /></a>
      </div>
      <!--产品展示详细-->
      <div id="mft" onmouseover="shows('mft')" onmouseout="closed('')">
        <ul>
         <li class="lim"><a href="#">主板</a></li>
         <li><a href="#">华硕主板</a></li>
         <li><a href="#">精英主板</a></li>
        </ul>
         <ul>
         <li class="lim"><a href="#">显示器</a></li>
         <li><a href="#">LG显示器</a></li>
        </ul>
         <ul>
         <li class="lim"><a href="#">显卡</a></li>
         <li><a href="#">耕升</a></li>
         <li><a href="#">铭瑄</a></li>
         <li><a href="#">网景</a></li>
        </ul>
        <ul>
         <li class="lim"><a href="#">电源</a></li>
         <li><a href="#">TT</a></li>
         <li><a href="#">酷冷</a></li>
         <li><a href="#">航佳</a></li>
         <li><a href="#">多彩</a></li>
        </ul>
        <ul>
         <li class="lim"><a href="#">音箱</a></li>
         <li><a href="#">漫步者</a></li>
        </ul>
        <ul>
         <li class="lim"><a href="#">键盘</a></li>
         <li><a href="#">罗技</a></li>
         <li><a href="#">HP</a></li>
         <li><a href="#">雷蛇</a></li>
        </ul>
      </div>
      <div class="nvg2">
       <a href="#" onmouseover="bimg('two',2)" onmouseout="yimg('two',2)"><img src="images/nvg2.gif" id="two" /></a>
      </div>
      <div class="nvg3">
       <a href="#" onmouseover="bimg('three',3)" onmouseout="yimg('three',3)"><img src="images/nvg3.gif" id="three" /></a>
      </div>
      <div class="nvg4"><a href="#" onmouseover="bimg('four',4)" onmouseout="yimg('four',4)"><a href="#" onmouseover="bimg('four',4)" onmouseout="yimg('four',4)"><img src="images/nvg4.gif" id="four" /></a></a></div>
      <div class="nvg5">
       <a href="#" onmouseover="bimg('five',5)" onmouseout="yimg('five',5)"><img src="images/nvg5.gif" id="five" /></a>
      </div>
     </div>
    </div>
    </div>
    </center>
    </body>
    </html>
    js 的代码 在下面
    function yimg(id,imgn,dd){
         bdiv = document.getElementById(dd);
     img = document.getElementById(id);
     img.src = "images/nvg"+imgn+".gif";
     bdiv.style.display = "none"; 
    }
    function bimg(id,imgn,dd){
     img = document.getElementById(id);
     img.src = "images/nvg"+imgn+"_1.gif";
     adiv = document.getElementById(dd);
     adiv.style.display = "block";
    }
    function showd(id){
     ddiv = document.getElementById(id);
     ddiv.style.display = "block";
    }
    function closed(id){
    ydiv = document.getElementById(id);
     ydiv.style.display = "none";
    }
    初学js,思路不知道对不对。