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

【问题标题】：How to target only the current hovering div with jquery when there are many other divs with the same class?当有许多其他具有相同类的 div 时，如何使用 jquery 仅定位当前悬停的 div？
【发布时间】：2013-10-02 15:00:20
【问题描述】：

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

【问题讨论】：

标签： jquery

【解决方案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')

【讨论】：

谢谢，它正在工作。我会在几分钟内选择你的答案。目前系统不允许这样做。我得等。