爲什麼鼠標懸停在外不起作用？

javascript代碼：爲什麼鼠標懸停在外不起作用？

<script type="text/javascript"> 
      window.onload=function(){ 
      var Div1 = document.getElementsByClassName("title"); 
      var Div2 = document.getElementsByClassName("sub-menu"); 
      var timer=null; 
      Div1.onmouseover = function(){ 
       clearTimeout(timer); 
       Div2.style.display='block'; 

      }; 
      Div1.onmouseout=function(){ 
       timer=setTimeout(function(){ 
        Div2.style.display='none'; 
       },300); 

      }; 

      Div2.onmouseover =function(){ 
       clearTimeout(timer); 
      }; 

      Div2.onmouseout=function(){ 
       timer=setTimeout(function(){ 

         Div2.style.display='none'; 
        },300); 


      }; 
     } 

    </script>

的html代碼：

<div id="nav"> 
    <div class="left"></div> 
    <div class="right"></div> 
    <ul> 
    <li><a href="/" class="current">Home</a></li> 
    <li class="title"><a href="/cpanel.html" class="">cPanel</a> 
     <div class="sub-menu"> 
     <div style="float:left"> 
      <h2>test</h2> 
      <ul> 
      <li> 
       <a href="#">test</a> 
      </li> 
      <li> 
       <a href="#">test</a> 
      </li> 
      </ul> 
     </div> 
    <div style="float:left"> 
      <h2>service</h2> 
      <ul> 
      <li> 
       <a href="#">hello</a> 
      </li> 
      <li> 
       <a href="#">hello</a> 
      </li> 
      </ul> 
     </div> 
</div> 
    </li> 





    <li class="title"><a href="/price.html" class="">Price</a> 
    <div class="sub-menu"> 
     <ul> 
      <li> 
       <a href="#">hello</a> 
      </li> 
      <li> 
       <a href="#">world</a> 
      </li> 
      </ul> 
     </div> 




    </li> 

    </ul> 
</div>

CSS：

#nav ul li{ 
    float: left; 
    margin-right:50px; 
    list-style: none; 
    border-bottom: 1px solid red; 
    position: relative; 
    border: 1px solid red; 
     } 
#nav ul li .sub-menu{ 
    display: none; 
    font-weight: normal; 
    margin-top: 1px; 
    padding: 0 10px 10px; 
    position: absolute; 
    text-align: left; 
    width:auto; 
    left: 10px; 
    top:30px; 
    border:1px solid #CCCCCC; 
    width: 300px; 
    }

JS代碼不work.when我把鼠標移動到文本cpanel它不沒有顯示它下面的相應內容，我不知道如何糾正它。提前致謝。

來源

2012-05-14 run

您的計時器變種會在onload函數內的局部變量，並以各種定時器打電話給你很可能會無法使用執行。 –

[getElementsByClassName not working]可能重複（http://stackoverflow.com/questions/3349332/getelementsbyclassname-not-working） –

您的方法存在許多問題。我建議你不要嘗試做一個捷徑，但看看只是添加事件處理程序，或者，在你的情況下，學會使用jquery來爲你照顧這件事。 –

getElementsByClassName()返回HTMLCollection。您需要選擇這個集合的第一個元素，通過將其視爲一個數組：

var Div1 = document.getElementsByClassName("title")[0]; 
var Div2 = document.getElementsByClassName("sub-menu")[0];

來源

2012-05-14 02:01:36 mgiuffrida

爲什麼鼠標懸停在外不起作用？

回答

相關問題