Удалить класс, добавленный с наведением и анимацией при mouseleave?

Question

Всем доброго времени суток. Есть 2 типа квадратов, выпуклые и вдавленные. Получается мы наводим на выпуклый блок он и все выпуклые блоки становятся вдавленными / вдавленные становятся выпуклыми.
Как сделать что-бы анимация при наведении мыши зафиксировалась на всех блоках пока на один из блоков наводят? а когда наводят на другой возобновляется анимация? То есть пока мышь наведена анимация не работает, как только увели на другой квадрат, снова сработала.

https://jsfiddle.net/4czhw1L7/6/

let oddLinks = document.querySelectorAll('.odd-link');
let evenLinks = document.querySelectorAll(".even-link");
let oddLinks_1 = document.querySelectorAll('.odd-link-1');
let oddLinks_3 = document.querySelectorAll(".odd-link-3");
let allLinks = document.querySelectorAll("[class^='center-menu__link-']");
function hoverMenu(e) {
    if (!e.target.classList.contains('.even-link')) {
        evenLinks.forEach((evLink) => evLink.classList.add("_active"));
    }
    if (!e.target.classList.contains('.odd-link')) {
        oddLinks.forEach((oddLink) => oddLink.classList.add("_active"));
    }
    if (!e.target.classList.contains('.odd-link-1')) {
        oddLinks_1.forEach((oddLinks_1) => oddLinks_1.classList.add("_active"));
    }
    if (!e.target.classList.contains('.odd-link-3')) {
        oddLinks_3.forEach((oddLinks_3) => oddLinks_3.classList.add("_active"));
    }
}

allLinks.forEach((link) => {
    link.addEventListener("mouseenter", hoverMenu);
    link.addEventListener('mouseleave', () => {
        link.addEventListener("animationend", () => link.classList.remove("_active"));
    })
});

.center-menu__column {
  display: flex;
  flex: 1 1 50%;
}

.center-menu__column-2 {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
}

.center-menu__block {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
}

.center-menu__block-2 {
  flex: 1 1 100%;
  display: flex;
}

.center-menu__block-3 {
  display: flex;
  flex-direction: column;
  flex: 1 1 189px;
}

.center-menu__subblock {
  display: flex;
  flex-wrap: wrap;
}

.center-menu__subblock-1 {
  display: flex;
  flex: 1 1 491px;
  min-height: 150px;
}

.center-menu__subblock-2 {
  display: flex;
  flex-direction: column;
  flex: 1 1 491px;
  min-height: 150px;
}

.center-menu__link-1 {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #161616;
  flex: 1 1 380px;
  font-weight: 700;
  font-size: 50px;
  line-height: 61px;
  text-align: center;
  color: #ffffff;
  box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.5);
  padding: 10px;
  transition: all 0.6s ease 0s;
}

@media (max-width: 550px) {
  .center-menu__link-1 {
    font-size: 35px;
    line-height: 43px;
  }
}

.center-menu__link-2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 0 1 50%;
  min-height: 150px;
  background: #161616;
  box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.5);
  font-weight: 400;
  font-size: 40px;
  line-height: 49px;
  text-align: center;
  letter-spacing: 0.1em;
  color: #ccba96;
  padding: 10px;
  transition: all 0.6s ease 0s;
}

@media (max-width: 550px) {
  .center-menu__link-2 {
    font-size: 25px;
    line-height: 31px;
  }
}

.center-menu__link-3 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 0 1 50%;
  min-height: 150px;
  background: #161616;
  box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.5);
  font-weight: 700;
  font-size: 40px;
  line-height: 49px;
  text-align: center;
  letter-spacing: 0.1em;
  color: #b99c63;
  padding: 10px;
  transition: all 0.6s ease 0s;
  /*
  &:hover {
    box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.5), inset 0px 0px 40px 5px rgba(185, 156, 99, 0.5);
  }
  */
}

@media (max-width: 550px) {
  .center-menu__link-3 {
    font-size: 30px;
    line-height: 37px;
  }
}

.center-menu__link-4 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1 1 400px;
  min-height: 400px;
  background: #161616;
  box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.5);
  text-align: center;
  padding: 10px;
}

.center-menu__link-4 span {
  font-weight: 400;
  font-size: 50px;
  line-height: 61px;
  writing-mode: vertical-lr;
  transform: rotate(-180deg);
  letter-spacing: 0.2em;
  color: #b99c63;
}

@media (max-width: 550px) {
  .center-menu__link-4 {
    font-size: 35px;
    line-height: 43px;
  }
}

.center-menu__link-5 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  font-size: 45px;
  line-height: 55px;
  text-align: center;
  color: #ccba96;
  flex: 1 1 300px;
  background: #161616;
  box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.5);
  padding: 10px;
  transition: all 0.6s ease 0s;
}

@media (max-width: 550px) {
  .center-menu__link-5 {
    font-size: 30px;
    line-height: 37px;
  }
}

.center-menu__link-6 {
  font-weight: 400;
  font-size: 36px;
  line-height: 44px;
  text-align: center;
  color: #ccba96;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1 1 191px;
  background: #161616;
  box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.5);
  padding: 10px;
  transition: all 0.6s ease 0s;
}

@media (max-width: 550px) {
  .center-menu__link-6 {
    font-size: 20px;
    line-height: 25px;
  }
}

.center-menu__link-7 {
  font-weight: 400;
  font-size: 50px;
  line-height: 61px;
  text-align: center;
  color: #ffffff;
  display: flex;
  flex: 1 1 150px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #161616;
  box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.5);
  padding: 10px;
  transition: all 0.6s ease 0s;
}

@media (max-width: 550px) {
  .center-menu__link-7 {
    font-size: 35px;
    line-height: 43px;
  }
}

    .odd-link {
    position: relative;
    z-index: 15;
    transition: all 0.3s ease 0s;
}

.even-link {
    position: relative;
    z-index: 18;
    transition: all 0.3s ease 0s;
}

.odd-link-1._active {
    z-index: 22;
    animation: link-hover-odd-1 1s linear;
}

.odd-link-3._active {
    z-index: 20;
    animation: link-hover-odd-3 1s linear;
}

.even-link._active {
    z-index: 15;
    animation: link-hover-even 1s linear;
}

.odd-link._active {
    z-index: 17;
    animation: link-hover-odd 1s linear;
}

@keyframes link-hover-even {
    0% {
        z-index: 15;
    }
    100% {
        z-index: 15;
    }
}

@keyframes link-hover-odd-1 {
    0% {
        z-index: 22;
    }
    100% {
        z-index: 22;
    }
}

@keyframes link-hover-odd-3 {
    0% {
        z-index: 18;
    }
    100% {
        z-index: 18;
    }
}

@keyframes link-hover-odd {
    0% {
        z-index: 17;
    }
    100% {
        z-index: 17;
    }
}

<div class="menu__center center-menu">
  <div class="center-menu__column">
    <div class="center-menu__link-1 odd-link-1">Текст</div>
    <div class="center-menu__block">
      <a href="" class="center-menu__link-2 even-link">Текст</a>
      <a href="" class="center-menu__link-3 odd-link-3">Текст</a>
    </div>
  </div>
  <div class="center-menu__column-2">
    <div class="center-menu__block-2">
      <div class="center-menu__block-3">
        <a href="" class="center-menu__link-4 even-link"><span>Текст</span></a>
      </div>
      <div class="center-menu__subblock">
        <div class="center-menu__subblock-1">
          <a href="" class="center-menu__link-5 odd-link">Текст</a>
          <a href="" class="center-menu__link-6 even-link">Текст</a>
        </div>
        <div class="center-menu__subblock-2">
          <a href="" class="center-menu__link-7 odd-link">Текст</a>
        </div>
      </div>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Удалить класс, добавленный с наведением и анимацией при mouseleave?

Ответы (0 шт):