jquery - 如何在悬停在 div 上时显示叠加文本并在 html 和 css 中隐藏 div 上的当前文本

Question

我有一个问题，我有一个 div，我在其中显示叠加文本，在 div 上，我已经在主 div 上有文本 我想隐藏现有文本并显示我指定为 display 的其他文本:none 当我使用它时。

我创建了以下 HTML 骨架并在其上应用了 CSS 但我想将鼠标悬停在父 div 上 我希望 div movies_post_text 中的内容应该被隐藏并且 div movie 中的内容-info 应使用 CSS 转换显示

这是我尝试过的

     $(document).ready(function(){
          $(".movie-grid").on('hover',function(){
             $(".movies_post_text").css("display":"none");
             $(".movies_post_text").css("display":"block");
          });
      });

   .movie-grid
    {
        background-image: url("img_avatar.png");
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	cursor:pointer;
        overflow: hidden;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .hover-text
    {
        display:none;
    }
    
    .movies_post_text
    {
    	right: 0;
        text-align: right;
        opacity: 1;
        z-index: 6;
        display: block;
        transition: all 300ms;
        position: absolute;
        left: 0;
        bottom: 0;
        padding: 10px 15px;
    }
    

    .hover-text  {
        text-align: right;
        bottom: -50px;
        display: block;
        opacity: 0;
        max-height: 150px;
        overflow: hidden;
     }

    .movie-info
    {
	    width:100%;
    }

    .movie-desc
    {
	   float:right;
       width:66.66%;
    }

    .reactions
    {
	   float:left;
       width:33.33%;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="movie-grid movie-content">
				<a href="http://www.cricbuzz.com">
				
				<div class="movies_post_text overlay">
					<div class="post-title">INCIDENT BY A BANK</div>
					<div class="post-meta ">Sweden/12 MIN</div>
					<div class="post-meta">Award Winning, Drama, Thriller</div>
					<div class="post-meta ">DIR.Ruben Ostlund</div>
				</div>
                
				<div class="grid-text-wrap hover-text">
                	<div class="movie-info">

					<div class="movie-desc">
						<h3 class="grid-title">INCIDENT BY A BANK</h3>
						<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 class="reactions">
						<span>429<i class="fa fa-eye"></i></span>
						<span class="">252<i class="fa fa-thumbs-up"></i></span>
					</div>
                    </div>
				</div>
				
				</a>
			  </div>

请帮我实现这个

Answer 1

请添加此脚本并删除隐藏/显示 div 的 css。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script><script>
$(document).ready(function() {
  $('.hover-text').hide();
   $('.movie-grid').hover(
     function () {
        $('.movies_post_text').hide();
        $('.hover-text').show();
     }, 
     function () {
        $('.movies_post_text').show();
        $('.hover-text').hide();
     }
  );
});
</script>