pourquoi la souris sur et hors ne fonctionne pas?

Question

code 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> 

code 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; 
    } 

le code js ne work.when pas que je mets la souris sur le texte cpanel il doesn Ne montre pas le contenu correspondant qui sous il.Je ne sais pas quel est le problème avec comment le corriger. Merci d'avance.

Answer 1

getElementsByClassName() renvoie un HTMLCollection. Vous devez sélectionner le premier élément de cette collection, en le traitant comme un tableau:

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