0

この質問はかなり簡単ですが、問題を解決するための適切な例が見つかりません。ユーザーがアイテムにマウスオーバーすると、サブメニューが表示されるメニューバーがありますdiv。

http://jsfiddle.net/Sx9J2/3/

HTML

<div class="nav">
    <a href="#">MENU ITEM</a>
</div>

<div class="box">
    THIS IS THE BOX
</div>

JS

$(document).ready(function(){

    $(".nav a").hover(
        function(){
            $(".box").show();
        }, function() {
            if (!$(".box").is(":hover")) $(".box").hide();
        }
    );

    $(".box").mouseleave(function() {
        $(this).hide();
    });

});

上記のコードは多くの場合に機能しますが、私のテストdivでは、マウスを上に置いても非表示になることがありました。私の推測では、イベント間に何らかの矛盾があるに違いありません。この問題は、Firefox と IE で特に深刻です。

この種の視覚効果に取り組むためのより良い方法は何ですか?

4

2 に答える 2