javascript - 为什么 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 类来解决这个问题。帮助我摆脱它我知道如果我使用 this 它会得到解决但是如何使用它来开始工作

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();
     }
  );