Как скрыть элемент при наведении на него и показать другой элемент?

202

17 апреля 2019, 15:50

Вот код:

  <div class="wr_razmer">
         <p class="t_name">GUCcI</p>
         <p class="t_namet">текс текс текс текс</p>
         <p class="price">98 567 ₽</p>
  </div>
  <div class="wr_razmer2">
         <p class="t_name t_name2">Также доступно в</p>
         <p class="price pricen">S M</p>
  </div>

Как сделать, чтобы при наведении на wr_razmer, он скрывался и появлялся wr_razmer2? пытался через display none, но блок мелькает.... П.с. высота разная блоков может быть...

Answer 1

Мне кажется тут js ни к чему

* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
} 
 
html, 
body { 
  width: 100%; 
  height: 100%; 
  background: #2b2b2b; 
  color: white; 
} 
 
.conteiner { 
  position: relative; 
  width: 100px; 
  height: 100px; 
} 
 
.wr_razmer { 
  position: absolute; 
  width: 100%; 
  height: 100%; 
  background: red; 
} 
 
.wr_razmer2 { 
  opacity: 0; 
  position: absolute; 
  width: 100%; 
  height: 100%; 
  background: blue; 
  transition: all .2s; 
} 
 
.conteiner:hover .wr_razmer2 { 
  opacity: 1; 
} 
 
.conteiner:hover .wr_razmer { 
  opacity: 0; 
}

<div class="conteiner"> 
  <div class="wr_razmer"> 
    <p class="t_name">GUCcI</p> 
    <p class="t_namet">текс текс текс текс</p> 
    <p class="price">98 567 ₽</p> 
  </div> 
  <div class="wr_razmer2"> 
    <p class="t_name t_name2">Также доступно в</p> 
    <p class="price pricen">S M</p> 
  </div> 
</div>

Answer 2

Оберните оба элемента в контейнер, второй скройте. При наведении на первый элемент скрывайте его и показывайте второй, тоже самое для второго, используя слушателей mouseover и mouseout.

Не совсем понятны наименования ваших классов, поэтому я сделал свои блоки.

Пример реализации:

let [frontBlock, backBlock] = [ 
  document.querySelector('.frontBlock'), document.querySelector('.backBlock'), 0 
] 
 
frontBlock.addEventListener('mouseover', (e) => { 
  if (e.target && e.relatedTarget && e.target.closest('div') !== e.relatedTarget.closest('div') && e) { 
    e.target.closest('div').style.display = 'none'; 
    backBlock.style.display = 'block'; 
  } 
}) 
 
backBlock.addEventListener('mouseout', (e) => { 
  if (e.target && e.relatedTarget && e.target.closest('div') !== e.relatedTarget.closest('div')) { 
    e.target.closest('div').style.display = 'none'; 
    frontBlock.style.display = 'block'; 
  } 
})

.container { 
  margin: 50px; 
} 
 
.container>* { 
  border: 2px solid black; 
  min-height: 100px; 
  overflow-y: auto; 
} 
 
.container h2 { 
  text-align: center; 
} 
 
.container p { 
  padding: 0px 20px; 
} 
 
.backBlock { 
  display: none; 
  min-height: 200px; 
}

<div class="container"> 
  <div class="frontBlock"> 
    <h2>Лицевой блок</h2> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe repudiandae doloremque laborum quae a cum minus eos delectus repellendus, debitis ad possimus nam fugit amet ea, accusantium qui iste animi perspiciatis. Deleniti beatae ut distinctio 
      nulla quae asperiores, praesentium sed, consequuntur illo totam aperiam cumque iusto reiciendis, ullam, tenetur delectus.</p> 
  </div> 
  <div class="backBlock"> 
    <h2>Обратный блок</h2> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam porro id eligendi unde, dolorum repellendus inventore doloremque animi exercitationem saepe ipsum nulla, minus accusamus quae nisi reprehenderit ullam eos eaque, voluptas, sit ea perspiciatis. 
      Labore accusantium doloremque facilis qui placeat aperiam perferendis numquam sequi recusandae vel debitis quos, inventore iure id dignissimos neque nihil ut omnis, temporibus, aliquid quasi dolor quae dolorem. Cupiditate totam animi fuga repellat 
      quasi et accusamus, impedit consequuntur perferendis repudiandae. Dignissimos facilis, sunt hic est maiores veniam sed voluptate ipsam voluptatum. Minima assumenda eveniet fuga pariatur. Cupiditate possimus incidunt reprehenderit explicabo laboriosam, 
      voluptate nesciunt sapiente enim.</p> 
  </div> 
</div>