时间戳

首页 > 解决方案 > 如何在另一个悬停子元素的一个元素的 ::after 上设置样式

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

问题描述

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

将鼠标悬停在.dropdown-toggle元素上时，我想应用transform: rotate(180deg)在.dropdown-toggle::after.

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

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

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

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

当鼠标悬停时，如何使:hover应用旋转混合？.dropdown-toggle::afterdropdown-menu

标签： htmlcsssassnavbarscss-mixins

解决方案

感谢@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');
    });

});

推荐阅读