Javascript 为什么鼠标不停地移动'；不行？

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>

---

js代码不起作用。当我将鼠标放在文本

cpanel

上时，它不会显示它下面的相应内容。我不知道它有什么问题以及如何更正它。提前感谢。

getElementsByClassName（）

返回一个。您需要选择此集合的第一个元素，方法是将其视为数组：

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

---

您的计时器变量将是onload函数中的一个局部变量，并且很可能无法用于您执行的各种计时器调用。可能的重复方法存在许多问题。我建议您不要走捷径，只考虑添加事件处理程序，或者，在您的情况下，学习使用jquery为您解决这个问题。@MarcB onmouseout和onmouseover函数创建闭包，对吗？适用于我。很抱歉，当您将鼠标悬停在li上时，无法单击内容中的链接

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

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