2

我有一个 javascript 问题，这已经困扰了我好几个小时了。我需要延迟一个 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

.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;
}
4

1 回答 1

0

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

让我知道这是否有帮助。如果你还需要它。有一个小提琴可能会有所帮助，以便为您提供更准确的响应。

于 2013-06-21T04:30:11.267 回答