导航栏活动元素在不应该在悬停时更改颜色？

Posted 2023-03-21

【中文标题】导航栏活动元素在不应该在悬停时更改颜色？

【英文标题】：Navbar active element changes color on hover when it shouldn't?

【发布时间】：2017-10-05 20:54:21

【问题描述】：

我正在构建一个 wordpress 网站。导航菜单具有我想要的 a:hover 和 a:active 颜色，但是当我将鼠标悬停在活动项目上时，颜色会发生变化。我试过检查代码，但它切换到的颜色在每个实例中都被划掉了，我似乎无法定位活动的悬停颜色。这是我对元素的了解：

.logo-nav .theme-nav .navbar-default .navbar-nav > .active > a, .logo-nav .theme-nav .navbar-default .navbar-nav > .active > a:focus, .logo-nav .theme-nav .navbar-default .navbar-nav > .active > a:hover 
    background: #08A4EE;

所有菜单项都是#08A4EE，处于活动状态并处于悬停状态。但是，当我将鼠标悬停在活动菜单项上时，颜色会变为 #1D302F，我不希望它如此。当我查看源代码时，我看到以下内容：

.logo-nav .theme-nav .navbar-default .navbar-nav > .active > a,

.logo-nav .theme-nav .navbar-default .navbar-nav > .active > a:focus,

.logo-nav .theme-nav .navbar-default .navbar-nav > .active > a:hover

背景：#1D302F; 颜色：#fff;

我不知道如何定位:active 菜单项的:hover。

提前致谢！

【参考方案1】：

我可以通过添加来解决这个问题

!important;

到我的CSS结束。我不知道为什么它会在活动元素悬停时切换到不同的颜色，但这解决了问题。

下面是这条线现在的样子：

.logo-nav .theme-nav .navbar-default .navbar-nav > .active > a, .logo-nav .theme-nav .navbar-default .navbar-nav > .active > a:focus, .logo-nav .theme-nav .navbar-default .navbar-nav > .active > a:hover 
    background: #08A4EE !important;