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

Question

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

禁用暗模式时的导航栏

启用暗模式时的导航栏

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

这就是我切换 class 以启用和禁用暗模式的方式

事情是我不能这样说：

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

作为一个类名，以便在.nav-item:not(.is-active):hover与特定颜色的灯光模式和.nav-item:not(.is-active):hover 之间切换（让我们说白色）用于暗模式。

我希望你能帮助我。 提前致谢： ：）

Answer 1

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

有关可用的 CSS 选择器类型的更多信息，请查看W3 学校的此页面。