Как установить стиль для :: after одного элемента из другого дочернего элемента hovered

Question

Я использую SCSS и навигационную панель Bootstrap 4 на своих страницах с определенными элементами .nav-item, которые являются переключателями для выпадающих меню.

При наведении курсора на элемент .dropdown-toggle я хочу применить transform: rotate(180deg) к стрелке переключателя, содержащегося в .dropdown-toggle::after.

При установке стиля преобразования на dropdown-toggle:hover::after стрелка вращается нормально, но когда мышь перемещается над выпадающим меню, стрелка возвращается в прежнее положение. Я хочу, чтобы стрелка вращалась даже при наведении курсора на выпадающие элементы.

Я пробовал разные способы применения стиля на dropdown-toggle::after, когда dropdown-toggle или dropdown-menu наведены, но он работает только напри выполнении

@mixin rotate180 {
    transform: rotate(-180deg);
}

.dropdown-toggle:hover::after {
    @include rotate180;
}

Как я могу заставить :hover применить миксин поворота к .dropdown-toggle::after также, когда dropdown-menu наведен?

Answer 1

Я нашел решение благодаря @Periplo, все, что мне нужно было сделать, это окружить мой dropdown-toggle <div class='dmenu-toggle-container'> и добавить обработчик событий для наведения на .nav-item, чтобы добавить и удалить класс dropup:

$(document).ready(function() {
    $('.nav-item').hover(function() {
        $(this).children('.dmenu-toggle-container').addClass('dropup');
    }, function() {
        $(this).children('.dmenu-toggle-container').removeClass('dropup');
    });

});