4

問題があります:

ここに私のHTMLの一部があります:

<div id="div_1">
    Here Hover
</div>
<div id="div_2">
    Here content to show
</div>

そして、ここに私のjQueryスクリプトの一部があります:

jQuery('#div_2').hide();
jQuery('#div_1').onmouseover(function() {
    jQuery('#div_2').fadeIn();
}).onmouseout(function(){
    jQuery('#div_2').fadeOut();
});

問題：

div_1 にカーソルを合わせると div_2 が表示され、外に出すと div_2 は非表示になりますが、次のようになります。

最初に div_1 にカーソルを合わせてから div_2 に移動すると、div_2 がすばやく非表示になります。

jQuery.addClass(); でこれを試しました。div_1でマウスアウトした後、何も変わっていません。

最初の div で 2 番目の div を作成したくありません... jQuery を使用する別の方法はありますか?

Thxアフメット

4

6 に答える 6

14

別のアプローチを次に示します。ホバーを 2 番目の div にも適用して、それ自体が非表示にならないようにします。

$(function() {
  $('#div_2').hide();
  $('#div_1, #div_2').hover(function() {
      $('#div_2').stop().fadeIn();
  }, function(){
      $('#div_2').stop().fadeOut();
  });
});
于 2010-03-08T23:31:46.543 に答える
2

mouseleave 関数は、あなたが探しているものかもしれません。

于 2010-11-24T23:25:36.513 に答える
0

mouseover ハンドラを に追加し#div_1、mouseout ハンドラを に追加し#div_2ます。このように、#div_2をマウスオーバーすると表示さ#div_1れ、 をマウスアウトすると非表示になります#div_2( をマウスアウトした直後ではなく#div_1)。これの唯一の本当の欠点は、2 番目の div を非表示にするには、最初にマウスオーバーする必要があることです。

このようなもの：

jQuery('#div_2').hide();
jQuery('#div_1').mouseover(function() {
    jQuery('#div_2').fadeIn();
});
jQuery('#div_2').mouseout(function(){
    jQuery('#div_2').fadeOut();
});
于 2010-03-08T20:42:46.880 に答える
0

これを行う最も簡単な方法は、両方<div>の を 3 番目のコンテナ内に置き<div>、そのコンテナにホバー効果を適用すること<div>です。

ところで、hover省略形を使用してハンドラーを追加する必要があります。

于 2010-03-08T20:30:13.850 に答える
0

mouseover() と mouseout() の代わりに hover() を使用してみてください。

このドキュメントページをチェックしてください: http://api.jquery.com/hover/

お役に立てれば。

于 2010-03-08T20:36:56.713 に答える
0

このコードを試してください:

$(function() {
    jQuery('#div_2').hide();
    jQuery('#div_1').mouseover(function() {
        jQuery('#div_2').fadeIn();
    });

    jQuery('#div_2').mouseout(function(){
        jQuery('#div_2').fadeOut();
    });
});
于 2011-06-10T10:22:33.007 に答える