почему jquery наводит курсор на один элемент, выделяет все элементы

Question

При наведении курсора на один элемент все они выделяются вот мой HTML и JQuery код

    $('.hover-text').hide();
       $('.movie-content').hover(
         function () {
            $('.movies_post_text').hide();
            $('.hover-text').show();
         }, 
         function () {
            $('.movies_post_text').show();
            $('.hover-text').hide();
         }
      );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="movie-content movie-big" style="background-image: url('Images/incidentbyabank-900x498.jpg');">
<a href="http://www.cricbuzz.com">

  <div class="movies_post_text">
    <h3>INCIDENT BY A BANK</h3>
    <p>Sweden/12 MIN</p>
    <p>Award Winning, Drama, Thriller</p>
    <p>DIR.Ruben Ostlund</p>
  </div>

  <div class="hover-text">
    <div class="row movie-info">
      <div class="col-md-4">
        <div class="reactions pull-left">
          <div class="view">429<i class="fa fa-eye"></i></div>
          <div class="like">252<i class="fa fa-thumbs-up"></i></div>
        </div>
      </div>
      <div class="col-md-8">
        <h3 class="grid-title">INCIDENT BY A BANK</h3>
        <div class="movie-desc">
          <p>Shot using a single camera, 90 people meticulously recreate a failed bank robbery that took place in Stockholm in June 2006. A superb single shot.The short went on to win the Golden Bear at </p>
        </div>
      </div>
    </div>
  </div>

</a>
</div>

Пожалуйста, предложите мне любые решения для этого с помощью jquery или любых html-классов. Помогите мне избавиться от него, я знаю, что если я использую , это , оно будет решено, но как использовать это, чтобы получить это работает

Answer 1

Проблема заключается в том, что в обратных вызовах событий вы не ограничиваете свои селекторы операцией только в пределах родительского элемента.

$('.hover-text').hide();
   $('.movie-content').hover(
     function () {
        $('.movies_post_text').hide(); //<-- all matching elements, not just the
                                       //    one inside the hovered div
        $('.hover-text').show();       //<-- same here
     }, 
     function () {
        $('.movies_post_text').show(); //<-- " "
        $('.hover-text').hide();       //<-- " "
     }
  );

Должно быть

$('.hover-text').hide();
   $('.movie-content').hover(
     function () {
        $(this).find('.movies_post_text').hide();
        $(this).find('.hover-text').show();
     }, 
     function () {
        $(this).find('.movies_post_text').show();
        $(this).find('.hover-text').hide();
     }
  );