@Rem36

Как поменять псевдоэлемент?

Здравствуйте. Пытаюсь поменять псевдоэлемент по клику. Что бы стрелка поворачивалась на 180 градусов при открытом списке. Пробую сделать замену картинки по клику.
<li class="section__top-nav-second-menu-item" id="list-initial-1">
                                Реализм
                            </li>

.section__top-nav-second-menu-item{
    position: relative;
    font-size: var(--fz-18);
    font-weight: var(--fw-400);
    line-height:var(--lh-26);
    font-family: var(--ff-os);
    color: var(--color-white);
    cursor: pointer;
}

.section__top-nav-second-menu-item:not(:last-child){
    margin-right: 111px;
}

.section__top-nav-second-menu-item::after{
    content: '';
    width: 12px;
    height: 12px;
    position: absolute;
    background-image: url('../img/top/arr-bottom.svg');
    background-repeat: no-repeat;
    right: -17px;
    top: 50%;
}

.section__top-nav-second-menu-item:hover::after{
    content: '';
    width: 12px;
    height: 12px;
    position: absolute;
    background-image: url('../img/top/arr-bottom-hover.svg');
    background-repeat: no-repeat;
    right: -17px;
    top: 36%;
}


Делаю так но не работает, что я не правильно делаю?
.section__top-nav-second-menu-item:after .is-active-list{
    content: '';
    width: 12px;
    height: 12px;
    position: absolute;
    background-image: url('../img/top/arr-bottom-view-top.svg');
    background-repeat: no-repeat;
    right: -17px;
    top: 36%;
}


window.addEventListener('DOMContentLoaded', function(){
            document.querySelector('.section__top-nav-second-menu-item').addEventListener('click', function(){
                document.querySelector('.section__top-nav-second-menu-item::after').classList.toggle('is-active-list')
            })
        });
  • Вопрос задан
  • 40 просмотров
Решения вопроса 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
document.querySelector('.section__top-nav-second-menu-item')
  .addEventListener('click', function(event){
    event.target.classList.toggle('is-active-list')
  });


.section__top-nav-second-menu-item.is-active-list::after {
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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