title: How to target only the current hovering div with jquery when there are many other divs with the same class?
body: <p>How to target only current div (that I am hovering over) and not all divs with the same class using jQuery hover() function?</p>
  
  <p>My code is something like this (I have many <code>div.video-item</code> elements on my website (it can vary for each page):</p>
  
  <pre><code>&lt;div classs="video-item list"&gt;
      &lt;a class="video-item-link" href="&lt;?php echo esc_url( home_url( '/' ) ); ?&gt;signup"&gt;
          &lt;img class="video-item-image" src="&lt;?php echo get_template_directory_uri() . '/images/001.jpg'; ?&gt;"&gt;
          &lt;div class="mouseover-element"&gt;&lt;!-- --&gt;&lt;/div&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div classs="video-item list"&gt;
      &lt;a class="video-item-link" href="&lt;?php echo esc_url( home_url( '/' ) ); ?&gt;signup"&gt;
          &lt;img class="video-item-image" src="&lt;?php echo get_template_directory_uri() . '/images/002.jpg'; ?&gt;"&gt;
          &lt;div class="mouseover-element"&gt;&lt;!-- --&gt;&lt;/div&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div classs="video-item list"&gt;
      &lt;a class="video-item-link" href="&lt;?php echo esc_url( home_url( '/' ) ); ?&gt;signup"&gt;
          &lt;img class="video-item-image" src="&lt;?php echo get_template_directory_uri() . '/images/003.jpg'; ?&gt;"&gt;
          &lt;div class="mouseover-element"&gt;&lt;!-- --&gt;&lt;/div&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The JS is:</p>
  
  <pre><code>&lt;script&gt;
      $('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();
        }
      );
  &lt;/script&gt;
  </code></pre>
  
  <p>The style for <code>div.mouseover-element</code> is display: none; in default CSS</p>
  
  <p>How can I target only the current div that my mouse is over? Right now when I mouseover over any <code>div.video-item-link</code> all 25 <code>div.mouseover</code> are shown. How to limit that only hfor my currently hovering div?</p>