Wie kann ich mit der Funktion jQuery hover () nur aktuelle Divs (über die ich schwebe) und nicht alle Divs mit derselben Klasse als Ziel festlegen?

Mein Code ist so ähnlich (ich habe vielediv.video-item Elemente auf meiner Website (es kann für jede Seite variieren):

<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>

Das JS ist:

<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>

Der Stil fürdiv.mouseover-element ist Anzeige: keine; in Standard-CSS

Wie kann ich nur den aktuellen Div anvisieren, über den sich meine Maus befindet? Gerade jetzt, wenn ich mit der Maus über eine bewegediv.video-item-link alle 25div.mouseover werden gezeigt. Wie kann ich das nur für meine derzeit schwebende Div begrenzen?