光标移动的太快，菜单就出问题了。。怎么解决啊 ？

关键是这句话self = oli[i];m=1;
要执行到n>=1后才赋值；
怎么让它只要鼠标移动新的li就赋值。<!doctype html><html> 
<head> 
<meta charset="utf-8" />
    <style type="text/css">
        #myCanvas{ border:1px solid #ccc;}
        *{margin:0;padding:0;}
        ul{ margin-left:500px;list-style:none }
        li{ position:relative;width:100px;line-height:25px;border:1px solid #ccc }
        .popDiv{ position:absolute;top:0px;left:100px;width:100px;height:50px;background:orange;color:#fff;display:none;opacity:0; }
    </style>
    
</head> 
<body> 
<div id="box">mybox</div><ul id="list">
    <li>
        <a href="" title="iphone_ios">苹果</a>
        <div class="popDiv">
            
        </div>
    </li>
    <li>
        <a href="" title="安卓_java">google</a>
        <div class="popDiv">
            
        </div>
    </li>
    <li>
        <a href="" title="wp">微软</a>
        <div class="popDiv">
            
        </div>
    </li>
    <li>
        <a href="" title="mysql">甲骨文</a>
        <div class="popDiv">
            
        </div>
    </li>
    <li>
        <a href="" title="全球最大的社交网站">facebook</a>
        <div class="popDiv">
            
        </div>
    </li>
</ul><canvas id="myCanvas" width="600" height="300">你的浏览器还不支持哦</canvas> 
<script type="text/javascript"> 
var list = document.getElementById("list");
    var oli = list.getElementsByTagName("li");
    var n = 0;
var m =0;
    var timer = null;
var ssss = null;
var flag = true;
    for(var i=0; i<oli.length; i++){
        var li = oli[i];

        li.onmouseover = (function(i){ return function(){
if(n >= 1){
oli[i].getElementsByTagName("div")[0].style.display = "block";
oli[i].getElementsByTagName("div")[0].style.opacity = "1"; 
self = oli[i];
m=1;
timer && clearTimeout(timer);
n=0;

}else{
n = n+0.200011515;
oli[i].getElementsByTagName("div")[0].style.display = "block";
oli[i].getElementsByTagName("div")[0].style.opacity = n;
flag = false;
timer = setTimeout(arguments.callee,90);


}



}

})(i)

        li.onmouseout = function(){
            if(m <= 0){
self.getElementsByTagName("div")[0].style.display = "none";
self.getElementsByTagName("div")[0].style.opacity = "0"; 
ssss && clearTimeout(ssss);
}else{
m -=0.200011515;
self.getElementsByTagName("div")[0].style.opacity = m;
console.log(oli[i])
ssss = setTimeout(arguments.callee,90);
}
        }
    }

    
</script> </body> 
</html>​

解决方案 »

  1.   

    li.onmouseout = function(){
                if(m <= 0){
                    self.getElementsByTagName("div")[0].style.display = "none";
                    self.getElementsByTagName("div")[0].style.opacity = "0"; 
                    ssss && clearTimeout(ssss);
                }else{
                    m -=0.200011515;
                    self.getElementsByTagName("div")[0].style.opacity = m;
                    console.log(oli[i])
                    ssss = setTimeout(arguments.callee,90);
                }
            }
    这里的SELF有问题。。你这样得到的是window。。并不是你想要的上面的oli[i]这个值;
    你可以alert(SELF)看看
    应该在之前声明var self=null;