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

#javascript #html #jquery #css

Вот код:

  

         
GUCcI
         
текс текс текс текс
         
98 567 ₽
  
  

         
Также доступно в
         
S M
  


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

Ответы

Ответ 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;
}

  

    
GUCcI
    
текс текс текс текс
    
98 567 ₽
  
  

    
Также доступно в
    
S M
  



Ответ 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;
}

  

    
Лицевой блок
    
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.
  
  

    
Обратный блок
    
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.