如何在另一个悬停子元素的一个元素的 ::after 上设置样式

Question

我在我的页面上使用 SCSS 和 Bootstrap 4 导航栏，某些 .nav-item 元素被切换为下拉菜单。

将鼠标悬停在 .dropdown-toggle 元素上时，我想在 .dropdown-toggle::after 中包含的切换箭头上应用 transform: rotate(180deg)。

在 dropdown-toggle:hover::after 上设置变换样式时，箭头可以很好地旋转，但是当鼠标移到下拉菜单本身上时，箭头会旋转回原来的位置。即使将鼠标悬停在下拉项上，我也想保持箭头旋转。

当 dropdown-toggle 或 dropdown-menu 悬停时，我尝试了在 dropdown-toggle::after 上应用样式的不同方法，但它仅在执行

时有效

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

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

当悬停 dropdown-menu 时，如何使 :hover 将旋转混合应用到 .dropdown-toggle::after？

Answer 1

感谢@Periplo，我找到了一个解决方案，我所要做的就是用 <div class='dmenu-toggle-container'> 围绕我的 dropdown-toggle 并添加一个事件处理程序，用于悬停在 .nav-item 上以添加 &删除 class dropup:

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

});

如何在另一个悬停子元素的一个元素的 ::after 上设置样式

How to set a style on ::after of one element from another hovered child element

html

css

sass

navbar

scss-mixins