Question

如何使用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-link上时，所有25 div.mouseover都显示出来。如何限制我当前悬停的div？

Answer 1

使用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')

当有许多其他具有相同类的div时，如何仅使用jquery来定位当前的悬停div？

1 个答案: