자바 스크립트 지연 팝업

Question

지금 몇 시간 동안 나를 괴롭 히고있는 javascript로 prob가있는 메신저. 나는 CSS 팝업을 지연 시켜서 페이지 주위에 마우스를 스크롤하면 팝업이 많이 생기지 않도록해야한다.

무엇이든 시도해 보시라. 어떤 링크를 스 와이프하여 x 초 후에 팝업으로 바보짓을하거나, 자동으로 닫는 등의 방법으로 팝업을 시도해보십시오. 마우스 오버에 타이머를 추가하면 이상한 행동을 시작합니다. 로 마우스를위한 타이머가 잘 작동하지만 닫기 전에 당신은 더 이상 마우스 오버 메뉴, 또한 음의 마진을 추가하는 시도 수 있으며

환호 모든

에 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를 autocloses

.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> 

이 정보가 도움이되는지 알려주십시오. 그래도 필요하다면. 어쩌면 좀 더 정확한 응답을주기 위해 비틀기를 사용하는 것이 도움이 될 것입니다.