この質問はかなり簡単ですが、問題を解決するための適切な例が見つかりません。ユーザーがアイテムにマウスオーバーすると、サブメニューが表示されるメニューバーがありますdiv
。
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 で特に深刻です。
この種の視覚効果に取り組むためのより良い方法は何ですか?