javascript延迟弹出

Question

我遇到了一个 javascript 问题，这个问题已经困扰我好几个小时了。我需要延迟一个 css 弹出窗口，这样如果你只是在页面上滚动鼠标，你就不会得到大量的弹出窗口。

无论我尝试什么，它都会让弹出窗口变得愚蠢，在 x 秒后通过滑动任何链接弹出，自动关闭等等。如果我在鼠标悬停上添加一个计时器，它就会开始表现得很奇怪，如果我然后删除计时器对于 mouseout 它工作正常但是你不能再在它关闭之前将鼠标悬停在菜单上，还尝试添加负边距并自动关闭

大家加油

脚本

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

如果这有帮助，请告诉我。如果你还需要它。有一个 fiddle 可以调整以给你更准确的响应会很有帮助。