3

私はjQueryを初めて使用しますが、実際にはあらゆる種類のAJAX / JavsScriptを使用しています（ただし、PHP、xHTML、CSSは初めてです）。とにかく、「ツールチップのような」効果を実現しようとしています。この効果では、divにカーソルを合わせると、新しいdivがその上にフェードインし、divを終了すると「ツールチップ」がフェードアウトします。

それで、これが私があちこちで奇妙なガイドを読んで一緒にスクラップすることができた基本的なjQueryです：

$(function()
{
    $('#sn-not-logged-in').hover(function()
    {
        $('#sn-not-logged-in-hover').fadeIn('medium');
    });

    $('#sn-not-logged-in-hover').mouseout(function()
    {
        $('#sn-not-logged-in-hover').fadeOut('medium');
    });

});

問題は、ホバーインするdiv内に「any」htmlタグを配置すると、2番目にロールオーバーするとdivがフェードアウトすることです。

これをどのように修正できるかについてのアイデアはありますか？

乾杯。

4

1 に答える 1

5

コメント用に更新

mouseleaveイベントを代わりに、mouseoutおよびmousenter代わりに切り替えるだけhoverで、次のようにマークアップの問題が修正されます。

$(function() {
  $('#sn-not-logged-in').mouseenter(function() {
    $('#sn-not-logged-in-hover').fadeIn('medium');
  });
  $('#sn-not-logged-in-hover').mouseleave(function() {
    $('#sn-not-logged-in-hover').fadeOut('medium');
  });
});

前の回答

.hover()次のように少し変更します。

$(function() {
  $('#sn-not-logged-in').hover(function() {
    $('#sn-not-logged-in-hover').fadeIn('medium');
  }, function() {
     $('#sn-not-logged-in-hover').fadeOut('medium');
  });
});

.hover()mouseenterとmouseleave（それぞれ提供する最初と2番目の関数）で実行されるため、fadeIn()すでにオーバーラップしているビットをすでに呼び出しています。

ただし、子に入るときでもmouseout発火しますが、使用しません。したがって、現在実際に問題を引き起こしているのは...マウスを内部のタグに移動しても、問題にはなりません:)mouseenter.hover()<img>

于 2010-05-16T23:00:49.053 に答える