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-link所有 25div.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 回答