2

何時間も私を悩ませてきたjavascriptに問題があります。css ポップアップを遅らせて、マウスをページ上でスクロールするだけで、大量のポップアップが表示されないようにする必要があります。

何を試しても、ポップアップが間抜けになり、任意のリンクをスワイプしてx秒後にポップアップし、自動終了などになります。マウスオーバーにタイマーを追加すると、奇妙な動作を始めます。次に、マウスアウトのタイマーを削除すると、正常に動作しますが、メニューを閉じる前にマウスオーバーできなくなり、負のマージンを追加しようとすると自動的に閉じます

みんなで乾杯

ジャバスクリプト

<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 に答える