3

jQuery hover() 関数を使用して、同じクラスのすべての div ではなく、現在の div (私がホバーしている) のみをターゲットにする方法は?

私のコードは次のようなものです（私のウェブサイトには多くのdiv.video-item要素があります（ページごとに異なる場合があります）：

<div classs="video-item list">
    <a class="video-item-link" href="<?php echo esc_url( home_url( '/' ) ); ?>signup">
        <img class="video-item-image" src="<?php echo get_template_directory_uri() . '/images/001.jpg'; ?>">
        <div class="mouseover-element"><!-- --></div>
    </a>
</div>

<div classs="video-item list">
    <a class="video-item-link" href="<?php echo esc_url( home_url( '/' ) ); ?>signup">
        <img class="video-item-image" src="<?php echo get_template_directory_uri() . '/images/002.jpg'; ?>">
        <div class="mouseover-element"><!-- --></div>
    </a>
</div>

<div classs="video-item list">
    <a class="video-item-link" href="<?php echo esc_url( home_url( '/' ) ); ?>signup">
        <img class="video-item-image" src="<?php echo get_template_directory_uri() . '/images/003.jpg'; ?>">
        <div class="mouseover-element"><!-- --></div>
    </a>
</div>

JS は次のとおりです。

<script>
    $('a.video-item-link').hover(

      function() {
         // in
         $('a.video-item-link div.mouseover-element').show();

      }, function() {
         // out
         $('a.video-item-link div.mouseover-element').hide();
      }
    );
</script>

のスタイルdiv.mouseover-elementは display: none; です。デフォルトの CSS で

マウスが置かれている現在の div のみをターゲットにするにはどうすればよいですか? 現在、マウスオーバーするとdiv.video-item-link25div.mouseover個すべてが表示されます。現在ホバリングしているdivのみを制限するにはどうすればよいですか?

4

1 に答える 1

6

thisイベントのターゲットである を jQuery トラバーサル関数と共に使用します。

$('a.video-item-link').hover(function() {
     // in
     $(this).find('div.mouseover').show();
  }, function() {
     // out
     $(this).find('div.mouseover').hide();
  }
);

マークアップからは、必要なように見えますが$(this).find('div.mouseover-element')

于 2013-10-02T15:01:47.330 に答える