html - 如何在另一个悬停的子元素的一个元素的::之后设置样式

Question

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

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

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

当 dropdown-toggle 或 dropdown-menu 是徘徊但它只在做的时候起作用

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

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

当 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');
    });

});