1

私はこのJSコードを持っています:

$$('.someclass').each(function(elem) {
    elem.observe('mouseover', function() {
        elem.next().show();
    });

    elem.observe('mouseout', function() {
        elem.next().hide();
    });
});

elem.next() は、スタイルとして display:none を持つ div を指します。マウスを監視要素の上に置くと、div が表示されますが、点滅し始めます。マウスを動かすと、狂ったように点滅します。同じ結果で代わりに mouseenter と mouseleave も試します。divが表示され、点滅しないようにします。マウスを div の外に移動すると、再び消えるはずです。これはHTMLです：

<div class="someclass">
    <a href="...">
        <img src="...">
    </a>
</div>
<div style="display: none;">my div that should not blink</div>

何が間違っているのでしょうか？

4

2 に答える 2

0

HTML の構造が原因で、mouseout および mouseover イベントが常に発生しています。

<a href>div 内にa とa があるため<img>、mouseover イベントがそれらの要素からバブルアップし、div のオブザーバーにヒットすることを観察しています。<div>また、カーソルが技術的には mouseout イベントの上にないため、同様に発生します。

このhttp://jsfiddle.net/pkA5n/をまとめて、Windows デスクトップ (IE10/Chrome/Firefox) で使用できるすべてのブラウザーで試してみましたが、点滅は見られませんでした。

于 2013-07-24T14:54:29.213 に答える