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> 

讓我知道這是否有幫助。如果你仍然需要它。有一個小提琴可能會調整，以給你一個更準確的答案是有幫助的。