@ferles22

Как переделать эффект при наведении в эффект при нажатии?

Всем привет, есть такой код. Суть в том, что надо сделать, что бы при первом клике, блок второй блок сменял первый, а при втором клике на блок происходил переход по ссылке, как это можно реализовать на JS?
<div class="container">
    <div class="block block-1"></div>
    <a href="#"><div class="block block-2"></div></a>
</div>

.container {
  overflow: hidden;
  position: relative;
  width: 200px;
  height: 200px;
  border: 2px solid #333333
  
}
.block {
  position: absolute;
  width: 200px;
  height: 200px;
  transition: all ease .3s;
}


.block-1 {
  background-color: red;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.block-2 {
  background-color: blue;
  position: absolute;
  left: 50%;
  top: 150%;
  transform: translate(-50%, -50%);
}


.container:hover .block-1 {
  top: -50%;
}
.container:hover .block-2 {
  top: 50%;
}
  • Вопрос задан
  • 102 просмотра
Пригласить эксперта
Ответы на вопрос 1
Madeas
@Madeas
UI / UX Designer, Frontend Developer
Попробуйте переделать этот код по себя jsfiddle.net/madeas/13qd42hp
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы