Как отобразить наложенный текст при наведении курсора на элемент div и скрыть текущий текст на элементе div в html и css - PullRequest
Новая
       17

Как отобразить наложенный текст при наведении курсора на элемент div и скрыть текущий текст на элементе div в html и css

0 голосов
/ 26 января 2019

У меня есть одна проблема, у меня есть div, в котором я показываю оверлейный текст, а на div у меня уже есть текст на основном div. Я хочу скрыть этот существующий текст и показать другой текст, который я назначил как display:нет , когда я на него намекаю.

я создал следующий html-скелет и применил к нему CSS, но я хочу при наведении курсора на родительский div я хочу содержимое внутри div movies_post_text должен быть скрыт и содержимое внутри div movie-info должно быть показано с переходами css

вот что я пробовал 

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

Css и Js 

 $(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%;
}

Пожалуйста, помогите мне достичь этого

1 Ответ

0 голосов
/ 26 января 2019

Пожалуйста, добавьте этот скрипт и удалите ваш CSS для скрытия / показа div. 

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