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

如何使用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？

解决方法

使用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？

解决方法

猜你在找的CSS相关文章