0

ホバリング時にDIVが表示する2つの画像があり、ユーザー情報が表示されています。見た目は意図したとおりですが、ホバーした画像の情報だけを表示する方法がわかりません。

これどうやってするの？

コードの実際の動作例を次に示します。http： //jsfiddle.net/uvHw4/

生のJavaScriptコード：

$(document).ready(function() {
    $('.start_profile_container_text').hide();
    $('.start_profile_container').mouseenter(function() {
        $('.start_profile_container_text').show('slide', { direction: "down"} ,'fast');
    });

    $('.start_profile_container').mouseout(function() {
        $('.start_profile_container_text').hide('slide', { direction: "down"} ,'fast');
    });

});
4

6 に答える 6

2

スクリプトを次のように変更します。

$(document).ready(function () {
  $('.start_profile_container_text').hide();

  $('.start_profile_container').mouseenter(function () {
    $('.start_profile_container_text', this).show('slide', {
      direction: "down"
    }, 'fast');
  });

  $('.start_profile_container').mouseout(function () {
    $('.start_profile_container_text', this).hide('slide', {
      direction: "down"
    }, 'fast');
  });

});

コードとの違いは、実際の要素に関連するようにshow/hide関数にthisを追加することです。

于 2013-01-16T13:02:38.320 に答える
1

コンテキスト内の現在のオブジェクトを、子孫の要素をアドレス指定するために渡します。

ライブデモ

 $('.start_profile_container').mouseenter(function () {
    $('.start_profile_container_text', this).show('slide', {
      direction: "down"
    }, 'fast');
  });
于 2013-01-16T13:01:00.510 に答える
1 
$(document).ready(function () {
  $('.start_profile_container_text').hide();

  $('.start_profile_container').mouseenter(function () {
    $('.start_profile_container_text', this).show('slide', {
      direction: "down"
    }, 'fast');
  });

  $('.start_profile_container').mouseleave(function () {
    $('.start_profile_container_text', this).hide('slide', {
      direction: "down"
    }, 'fast');
  });

});

コンテキストを使用して、.start_profile_container_textホバーされたdiv内のみを検索します$('.start_profile_container_text', this)。これは現在のdivを指す要素です。

また、私が置き換えたものを参照mouseoutしmouseleaveてくださいmouseout（テキストは上下にジャンプしません。違いは、mouseoutマウスが子要素にmouseleave移動しても発生し、要素からその子に移動しても発生しないことです）

デモ： http： //jsfiddle.net/uvHw4/1/

于 2013-01-16T13:01:53.130 に答える
1

children（）デモを使用してみてください：http：//jsfiddle.net/gDZey/

$(this).children('.start_profile_container_text').show('slide', {
  direction: "down"
}, 'fast');

この場合、http：//api.jquery.com/hover/を使用することを提案します。

于 2013-01-16T13:02:35.577 に答える
1 
$(document).ready(function () {
  $('.start_profile_container_text').hide();

  $('.start_profile_container').hover(function () {
    $(this).find('.start_profile_container_text').show('slide', {
      direction: "down"
    }, 'fast');
  },

  function () {
    $(this).find('.start_profile_container_text').hide('slide', {
      direction: "down"
    }, 'fast');
  });

});

このコードは正常に機能します。そして、とhoverの代わりに使用することをお勧めします。mouseentermouseout

そしてここにデモがありますhttp://jsfiddle.net/uvHw4/3/

于 2013-01-16T13:04:10.797 に答える
0

uは2つの関数の代わりにhover（）を使用できます。

$('.start_profile_container').hover(
   function () {
      $('.' + this.className +'_text', this).show('slide', { direction: "down"}, 'fast');
   },
   function () {
      $('.' + this.className +'_text', this).hide('slide', {direction: "down"}, 'fast');
   }
);
于 2013-01-16T13:06:26.963 に答える