Как сделать анимацию смены языка на JS?

Question

скажите пожалуйста как сделать смену языка что бы при наведении открывался блок и при клике закрепился. Я сделал при наведении но не понимаю как закрепить язык

let langcont = document.querySelector('.lang-spisok')
let ru = document.querySelector('.ru')
let en = document.querySelector('.en')
langcont.addEventListener('mouseover', (() => {
    en.classList.add("active");

}))

langcont.addEventListener('mouseout', (() => {
    en.classList.remove("active");
}))

.en{
    display: none;
}
.active{
    display: block;
    position: absolute;
    top: 20px;
}
.ru{
    margin-bottom: 20px;
    display: inline;
}

<li class="lang-spisok">
                                <a class=" menu__info-item-lang selected ru notranslate language__img_active" href="#"
                                    alt="ru">RU
                                </p>
                                <img src="/img/down-arrow_icon-icons.com_64915.svg" alt="" class="arrow-down">
                                <a class="menu__info-item hidden en notranslate " href="#" alt="ru">EN</p>
                            </li>

Спасибо огромное заранее!

Answer 1

Если я понял правильно задачу то можно сделать вот так:

let langcont = document.querySelector('.lang-spisok');
let ru = document.querySelector('.ru');
let en = document.querySelector('.en');

langcont.addEventListener('click', (() => {
  en.classList.toggle("active");

}));

langcont.addEventListener('mouseover', (() => {
  en.classList.add("active-hover");

}))

langcont.addEventListener('mouseout', (() => {
  en.classList.remove("active-hover");
}))

.en {
  display: none;
}

.ru {
  margin-bottom: 20px;
  display: inline;
}

.active {
  display: block;
  position: absolute;
  top: 24px;
  left: 52px;
}

.active-hover {
  display: block;
  position: absolute;
  top: 24px;
  left: 52px;
}

<li class="lang-spisok">
  <a class=" menu__info-item-lang selected ru notranslate language__img_active" href="#" alt="ru">RU
            </a>
  <br>
  <a class="menu__info-item hidden en notranslate " href="#" alt="ru">EN</a>
</li>

БЛОГ НА HUSL

Как сделать анимацию смены языка на JS?

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