javascript延迟弹出

Question

即时通讯问题与JavaScript的几个小时现在一直在窃听我。我需要延迟一个css弹出窗口，这样如果你只是在页面上滚动鼠标，你不会得到大量的弹出窗口。

无论我尝试它要么使弹出窗口行为愚蠢，在任何链接滑动x秒后弹出，自动关闭等等，如果我添加一个计时器到鼠标悬停它开始动作怪异，如果我然后删除定时器鼠标移开它工作正常，但你不能再鼠标悬停菜单关闭之前，也尝试添加否定保证金，autocloses

欢呼所有

javscript

<script type="text/javascript"> 

var span = document.querySelectorAll('.pop'); 
for (var i = span.length; i--;) { 
(function() { 
    var t; 
    span[i].onmouseover = function() { 
     hideAll(); 
     clearTimeout(t); 
     this.className = 'popHover'; 
    }; 
    span[i].onmouseout = function() { 
     var self = this; 
     t = setTimeout(function() { 
      self.className = 'pop'; 
     }, 300); 
    }; 
})(); 
} 

function hideAll() { 
for (var i = span.length; i--;) { 
    span[i].className = 'pop'; 
    } 
}; 
</script> 

CSS

.pop { 
position:relative; 
    } 
    .pop div { 
    display: none; 
    } 

.popHover { 
position:absolute; 
} 

.popHover div { 
background-color:#FFFFFF; 
border-color:#AAAAAA; 
border-style:solid; 
border-width:1px 2px 2px 1px; 
color:#333333; 
padding:5px; 
position:absolute; 
z-Index:9999; 
width:150px; 
display: inline-block; 
margin-top: -20px; 
} 

Answer 1

使用jquery可能会对您正在尝试做的事更有帮助。尝试这样的：

// Use a CDN to take advantage of caching 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
<script type="text/javascript"> 
var t; 
$('.pop').on('mouseover', $.proxy(function() { 
    hideAll(); 
    clearTimeout(t); 
    this.addClass('popHover'); 
    this.removeClass('pop'); 
}, this)); 

$('.pop').on('mouseout', $.proxy(function() { 
    var self = this; 
    t = setTimeout(function() { 
     self.addClass('pop'); 
     self.removeClass('popHover'); 
    }, 300); 
},this)); 


function hideAll() { 
    // Since you are calling this from the mouseover function of all the 
    // elements with the 'pop' class, I dont understand what the purpose of this class 
    // is so it might not be entirely correct. 
    $('.pop').addClass('pop'); 
} 
</script> 

让我知道这是否有帮助。如果你仍然需要它。有一个小提琴可能会调整，以给你一个更准确的答案是有帮助的。