帮忙让切换有时间间隔。

我想在上面停顿0.5秒后触发，而不是延迟0.5秒后在触发
比如我快速划过a，没有在上面停留0.5秒就不触发。。
<!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=gb2312" />
<title>12345</title>
<style type="text/css">
.mir{
font-size: 14px;
color: #999900;
text-decoration: none;
position: absolute;
left: 522px;
top: 126px;
padding: 0px;
display: block;
width: 72px;
height: 19px;
}
.mu{
width: 55px;
position: absolute;
margin: 0px;
z-index: 100;
left: 610px;
top: 129px;
height: 150px;
list-style-type: none;
}
.mu li{
height: 20px;
width: 55px;
border: 1px solid #003399;
font-size: 13px;
line-height: 20px;
margin-top: 2px;
}
</style>
</head><body>
<span class="mir" onMouseOver="show()">更多</span>
<ul class="mu" id="milk" style="display: none">
<li id="ss1" onClick="setTab('ss',1,5)">111</li>
<li id="ss2" onClick="setTab('ss',2,5)">222</li>
<li id="ss3" onClick="setTab('ss',3,5)">333</li>
<li id="ss4" onClick="setTab('ss',4,5)">444</li>
<li id="ss5" onClick="setTab('ss',5,5)">555</li><ul>
</body>
<script language="javascript">
function show()   
 { var tag = document.getElementById("milk")   
 if (tag.style.display=="none") { tag.style.display = "block" }}   
 document.onclick = function(e){ var e = e||window.event,t = e.target||e.srcElement;
  if(t.innerHTML=='更多') return;
  document.getElementById("milk").style.display = "none"; }   
 window.onload=function(){
 var lis = document.getElementById("milk").getElementsByTagName("li");
 for(var i=0;i<lis.length;i++)
{
lis[i].onmouseover=function(){
this.style.backgroundColor='#52BFF5';
this.style.color='red';
};
lis[i].onmouseout=function(){
this.style.backgroundColor='white';
this.style.color='black';
};  
}  
};</script>
</html>

解决方案 »

  1.   

    jQquery+hoverIntent插件可以实现，hoverIntent就是做这个事情的。
    http://cherne.net/brian/resources/jquery.hoverIntent.html
    http://cherne.net/brian/resources/jquery.hoverIntent.js
      

  2.   

    停留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=gb2312" />
    <title>12345</title>
    <style type="text/css">
    .mir{
    font-size: 14px;
    color: #999900;
    text-decoration: none;
    position: absolute;
    left: 522px;
    top: 126px;
    padding: 0px;
    display: block;
    width: 72px;
    height: 19px;
    }
    .mu{
    width: 55px;
    position: absolute;
    margin: 0px;
    z-index: 100;
    left: 610px;
    top: 129px;
    height: 150px;
    list-style-type: none;
    }
    .mu li{
    height: 20px;
    width: 55px;
    border: 1px solid #003399;
    font-size: 13px;
    line-height: 20px;
    margin-top: 2px;
    }
    </style>
    </head><body>
    <span id="mirr" class="mir" onMouseOver="id=setInterval(fff,100)" onmouseout="clearInterval(id);val=0;">更多</span>
    <ul class="mu" id="milk" style="display: none">
    <li id="ss1" onClick="setTab('ss',1,5)">111</li>
    <li id="ss2" onClick="setTab('ss',2,5)">222</li>
    <li id="ss3" onClick="setTab('ss',3,5)">333</li>
    <li id="ss4" onClick="setTab('ss',4,5)">444</li>
    <li id="ss5" onClick="setTab('ss',5,5)">555</li><ul>
    </body>
    <script language="javascript">
    var id;
    var val=0;
    function fff(){
    val++;
    if(val>=10){
    show();
    }
    }
    function show(){

    var tag = document.getElementById("milk")   
      if (tag.style.display=="none") { tag.style.display = "block" }}   
      document.onclick = function(e){ var e = e||window.event,t = e.target||e.srcElement;
      if(t.innerHTML=='更多') return;
      document.getElementById("milk").style.display = "none"; }   
     window.onload=function(){
     var lis = document.getElementById("milk").getElementsByTagName("li");
     for(var i=0;i<lis.length;i++)
    {
    lis[i].onmouseover=function(){
    this.style.backgroundColor='#52BFF5';
    this.style.color='red';
    };
    lis[i].onmouseout=function(){
    this.style.backgroundColor='white';
    this.style.color='black';
    };  
    }  
    };</script>
    </html>
      

  3.   

    停留0.5秒才会展现
    <!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=gb2312" />
    <title>12345</title>
    <style type="text/css">
    .mir{
    font-size: 14px;
    color: #999900;
    text-decoration: none;
    position: absolute;
    left: 522px;
    top: 126px;
    padding: 0px;
    display: block;
    width: 72px;
    height: 19px;
    }
    .mu{
    width: 55px;
    position: absolute;
    margin: 0px;
    z-index: 100;
    left: 610px;
    top: 129px;
    height: 150px;
    list-style-type: none;
    }
    .mu li{
    height: 20px;
    width: 55px;
    border: 1px solid #003399;
    font-size: 13px;
    line-height: 20px;
    margin-top: 2px;
    }
    </style>
    </head><body>
    <span id="mirr" class="mir" onMouseOver="id=setInterval(fff,100)" onmouseout="clearInterval(id);val=0;">更多</span>
    <ul class="mu" id="milk" style="display: none">
    <li id="ss1" onClick="setTab('ss',1,5)">111</li>
    <li id="ss2" onClick="setTab('ss',2,5)">222</li>
    <li id="ss3" onClick="setTab('ss',3,5)">333</li>
    <li id="ss4" onClick="setTab('ss',4,5)">444</li>
    <li id="ss5" onClick="setTab('ss',5,5)">555</li><ul>
    </body>
    <script language="javascript">
    var id;
    var val=0;
    function fff(){
    val++;
    if(val>=5){
    show();
    }
    }
    function show(){

    var tag = document.getElementById("milk")   
      if (tag.style.display=="none") { tag.style.display = "block" }}   
      document.onclick = function(e){ var e = e||window.event,t = e.target||e.srcElement;
      if(t.innerHTML=='更多') return;
      document.getElementById("milk").style.display = "none"; }   
     window.onload=function(){
     var lis = document.getElementById("milk").getElementsByTagName("li");
     for(var i=0;i<lis.length;i++)
    {
    lis[i].onmouseover=function(){
    this.style.backgroundColor='#52BFF5';
    this.style.color='red';
    };
    lis[i].onmouseout=function(){
    this.style.backgroundColor='white';
    this.style.color='black';
    };  
    }  
    };</script>
    </html>
      

  4.   


    <script type="text/javascript">
            var mytimer = null;
            $(".mir").mouseover(function () {
                mytimer = window.setTimeout("myfunc('123','456')", 3000);
            })        $(".mir").mouseout(function () {
                clearTimeout(mytimer);
                mytimer = -1;
            })        function myfunc(t1, t2) {
                if (mytimer == -1) return;
                alert(t1+" "+t2);
                clearTimeout(mytimer);
                mytimer = null;
            }  
        </script>
    写完 手工。
      

  5.   

    <!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=gb2312" />
    <title>12345</title>
    <style type="text/css">
    .mir{
    font-size: 14px;
    color: #999900;
    text-decoration: none;
    position: absolute;
    left: 522px;
    top: 126px;
    padding: 0px;
    display: block;
    width: 72px;
    height: 19px;
    }
    .mu{
    width: 55px;
    position: absolute;
    margin: 0px;
    z-index: 100;
    left: 610px;
    top: 129px;
    height: 150px;
    list-style-type: none;
    }
    .mu li{
    height: 20px;
    width: 55px;
    border: 1px solid #003399;
    font-size: 13px;
    line-height: 20px;
    margin-top: 2px;
    }
    </style>
    </head><body>
    <span class="mir" onMouseOver="show()" onmouseout="clearTimeout(kkk)">更多</span>
    <ul class="mu" id="milk" style="display: none">
    <li id="ss1" onClick="setTab('ss',1,5)">111</li>
    <li id="ss2" onClick="setTab('ss',2,5)">222</li>
    <li id="ss3" onClick="setTab('ss',3,5)">333</li>
    <li id="ss4" onClick="setTab('ss',4,5)">444</li>
    <li id="ss5" onClick="setTab('ss',5,5)">555</li><ul>
    </body>
    <script language="javascript">
    var kkk;
    function show() {
    kkk = setTimeout(function() {
    var tag = document.getElementById("milk");
    if (tag.style.display == "none") {
    tag.style.display = "block"
    }
    },
    500)
    }
    document.onclick = function(e) {
    var e = e || window.event,
    t = e.target || e.srcElement;
    if (t.innerHTML == '更多') return;
    document.getElementById("milk").style.display = "none";
    }
    window.onload = function() {
    var lis = document.getElementById("milk").getElementsByTagName("li");
    for (var i = 0; i < lis.length; i++) {
    lis[i].onmouseover = function() {
    this.style.backgroundColor = '#52BFF5';
    this.style.color = 'red';
    };
    lis[i].onmouseout = function() {
    this.style.backgroundColor = 'white';
    this.style.color = 'black';
    };
    }
    };
    </script>
    </html>
      

  6.   

    这样？
    <!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=gb2312" />
    <title>12345</title>
    <style type="text/css">
    .mir{
    font-size: 14px;
    color: #999900;
    text-decoration: none;
    position: absolute;
    left: 522px;
    top: 126px;
    padding: 0px;
    display: block;
    width: 72px;
    height: 19px;
    }
    .mu{
    width: 55px;
    position: absolute;
    margin: 0px;
    z-index: 100;
    left: 610px;
    top: 129px;
    height: 150px;
    list-style-type: none;
    }
    .mu li{
    height: 20px;
    width: 55px;
    border: 1px solid #003399;
    font-size: 13px;
    line-height: 20px;
    margin-top: 2px;
    }
    </style>
    </head><body>
    <span class="mir" onMouseOver="show()" onmouseout="clearTimeout(kkk)">更多</span>
    <ul class="mu" id="milk" style="display: none">
    <li id="ss1" onClick="setTab('ss',1,5)">111</li>
    <li id="ss2" onClick="setTab('ss',2,5)">222</li>
    <li id="ss3" onClick="setTab('ss',3,5)">333</li>
    <li id="ss4" onClick="setTab('ss',4,5)">444</li>
    <li id="ss5" onClick="setTab('ss',5,5)">555</li><ul>
    </body>
    <script language="javascript">
    var kkk;function show(){kkk=setTimeout(function(){var tag=document.getElementById("milk");if(tag.style.display=="none"){tag.style.display="block"}},500)};document.onclick=function(e){var e=e||window.event,t=e.target||e.srcElement;if(t.innerHTML=='更多')return;document.getElementById("milk").style.display="none"};window.onload=function(){var lis=document.getElementById("milk").getElementsByTagName("li");for(var i=0;i<lis.length;i++){lis[i].onmouseover=function(){this.style.backgroundColor='#52BFF5';this.style.color='red'};lis[i].onmouseout=function(){this.style.backgroundColor='white';this.style.color='black'}}};
    </script>
    </html>
      

  7.   

    我晕 引用 jquery 了么？
      

  8.   

    只用修改
    var kkk;function show(){kkk=setTimeout(function(){var tag=document.getElementById("milk");if(tag.style.display=="none"){tag.style.display="block"}},500)}
    和
    <span class="mir"加一个onmouseout="clearTimeout(kkk)"
      

  9.   

    有呢，如果要延时时间长点，修改那个500，500表示0.5秒，你改为3000试试，例如var kkk;function show(){kkk=setTimeout(function(){var tag=document.getElementById("milk");if(tag.style.display=="none"){tag.style.display="block"}},3000)}我说的延时是指鼠标移动到<span id="mirr"时的延时，不知道您是不是这个意思