当有许多其他具有相同类的div时，如何仅使用jquery定位当前悬停的div? [英] How to target only the current hovering div with jquery when there are many other divs with the same class?

问题描述

如何使用jQuery hover()函数仅定位当前的div(我将鼠标悬停在上面)而不是所有div都位于同一类中?

How to target only current div (that I am hovering over) and not all divs with the same class using jQuery hover() function?

我的代码是这样的(我的网站上有很多div.video-item元素(每个页面可能有所不同):

My code is something like this (I have many div.video-item elements on my website (it can vary for each page):

<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的样式:无；在默认CSS中

The style for div.mouseover-element is display: none; in default CSS

如何仅将鼠标悬停在当前div上作为目标?现在，当我将鼠标悬停在任何div.video-item-link上时，将显示所有25个div.mouseover.如何限制当前悬停的div仅此一个?

How can I target only the current div that my mouse is over? Right now when I mouseover over any div.video-item-link all 25 div.mouseover are shown. How to limit that only hfor my currently hovering div?

推荐答案

使用作为事件目标的this以及jQuery遍历功能:

Use this, which is the target of the event, along with jQuery traversal functions:

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

尽管从您的标记来看，您似乎需要$(this).find('div.mouseover-element')

Though from your markup, it looks like you need $(this).find('div.mouseover-element')

这篇关于当有许多其他具有相同类的div时，如何仅使用jquery定位当前悬停的div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！