1

これが回答されている場合は申し訳ありませんが、回答が見つかりませんでした..

私が持っているのは、いくつかのリンクを含む DIV です。そして、私がやりたいことは、マウスが上にある間は表示されますが、マウスが離れるとフェードアウトします(DIV)。唯一の問題は、マウスがその中のリンクに当たるとすぐに DIV がフェードアウトすることです。リンクもDIVの一部であることを認識させる方法はありますか、それとも最善の解決策は何ですか?

これは現在のコードです:

jQuery

$("#hoverbox").mouseover(function() {
    $("#hoverbox").fadeOut();
    $("#sub-menu").fadeIn("slow");
});

$('#sub-menu').mouseout(function() {
  $("#sub-menu").fadeOut();
  $("#hoverbox").fadeIn();
});

HTML

<div id="sub-menu">
<a href="test.html">test</a>
</div>
<div id="hoverbox"></div>

この問題を抱えているのは私だけではないはずなので、ここで非常に基本的なことを見逃している可能性があります。

4

2 に答える 2

0

問題は、間違ったイベントを使用していることです。mouseleave代わりに使用したいので、使用mouseoutできるイベントの次のリストを確認してください。

mouseenter / mouseout
mouseover / mouseleave

あなたはすでに両方のペア（内部要素を含むかどうか）の違いを学び、2つのグループから混合していました。

したがって、次の行を変更する必要があります。

$('#sub-menu').mouseout(function() {

これのために：

$('#sub-menu').mouseleave(function() {

作業デモを参照してください。

于 2012-11-06T09:19:07.113 に答える
0

これはあなたが望んでいたものに近いですか？

$("#hoverbox").mouseenter(function() {
    $("#hoverbox").hide("slow");
    $("#sub-menu").show("fast");
});

$('#sub-menu').mouseleave(function() {
   $("#sub-menu").hide();
   $("#hoverbox").show();
});​

デモはこちら: http://jsfiddle.net/UTaFL/

ここでは、子要素を無視し、指定された要素の境界に出入りするマウスのみを探すため、mouseenter と mouseleave を使用することをお勧めします。

また、実際にページに表示される前に mouseenter と mouseleave (および mouseover と mouseout) イベントを呼び出すことができるため、問題が発生する可能性があるため、fadeIn と fadeOut を変更しました。

于 2012-11-06T09:25:34.930 に答える