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

Question

[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%;
}

Answer 1

[Andrej Sharapov]

Попробуйте переделать этот код по себя jsfiddle.net/madeas/13qd42hp