Как настроить таргетинг только на текущий div (над которым я нахожусь), а не на все div с одним и тем же классом, используя функцию jQuery hover ()?

Мой код примерно такой (у меня много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 дисплей: нет; в CSS по умолчанию

Как я могу настроить таргетинг только на текущий элемент div, на котором находится моя мышь? Прямо сейчас, когда я наведите курсор мыши на любойdiv.video-item-link все 25div.mouseover показаны. Как ограничить это только моим текущим div?