如何更改悬停项目的颜色？

Question

我目前正在尝试实现一种暗模式，但我正在为此苦苦挣扎：

Navbar when dark mode is disabled

Navbar when dark mode is enabled

如您所见，当禁用暗模式时，.nav-item 被悬停并且可以看到文本，但是当启用暗模式时，由于颜色，几乎不可能看到。

This is how I'm toggling class to enable and disable dark mode

事情是我不能这样说：

.nav-item:not(.is-active):hover

作为类名，以便在 .nav-item:not(.is-active):hover 与特定颜色的灯光模式和 .nav-item:not( .is-active)：悬停在暗模式下使用不同的颜色（比如说白色）。

我希望你能帮助我。提前致谢！ :)

Answer 1

当您为nav-item 切换dark-mode 类时，您可以使用.dark-mode.nav-item:not(.is-active):hover CSS 选择器。使用此选择器创建样式将允许您使用 dark-mode 类定位 nav-items。在该样式中，您可以在黑暗模式下为悬停定义不同的颜色。

有关可用的 CSS 选择器类型的更多信息，请查看this page from W3 schools。