鼠标悬停时标题图标颜色问题

支持
3

感谢您的回复！

不知何故，原生标题图标的颜色（我喜欢的浅蓝色）似乎是正确的，但我的其他图标（由 主题组件 设置）却不是。

所以，汉堡包和搜索图标的浅蓝色工作正常，也许是因为它们的 .header-dropdown-toggle 类。
添加我的附加图标的主题组件也在 .header-dropdown-toggle 类相同的级别添加了 .custom-header-icon-link 选择器。

也许这些选择器提供了足够的精度来覆盖任何使用 .discourse-no-touch 的规则？老实说，我不太明白 CSS 中发生的一切。

但您的建议帮助我重构了 CSS。这是结果：

.d-header-icons {
    .header-dropdown-toggle, .custom-header-icon-link {
        .icon {
            .d-icon {
                color: white;
            }
            &:hover, &:focus {
                background: white;
                .d-icon {
                    color: var(--tertiary-medium);
                }
            }
        }
        &.active .icon .d-icon {
            color: var(--tertiary-medium);
        }
    }
}

它工作得很完美，而且我没有使用 .discourse-no-touch。

chrome_Q7W3Tsm9BU

1 个赞