Question

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

无论我尝试什么，或者让弹出窗口变得愚蠢，在x秒后弹出任意链接，自动关闭等等，如果我向鼠标添加一个计时器，它开始表现怪异，如果我然后删除计时器对于mouseout它工作正常但你不能再在它关闭之前鼠标悬停菜单，也尝试添加负边距并自动关闭

欢呼所有

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>

如果这有帮助，请告诉我。如果你还需要它。有一个小提琴可能会有所帮助，可能会给你一个更准确的反应。

javascript延迟弹出窗口

1 个答案: