Navbar active element changes color on hover when it shouldn't?
I have a wordpress site that I am building. The nav menu has the colors I want for a:hover and a:active, but when I hover on the active item, the color changes. I have tried inspecting the code, but the color it switches to is crossed out at every instance and I can't seem to be able to target the active's hover color. Here is what I have for the element:
.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;
}
All menu items are #08A4EE, active and on hover. However, when I hover over the active menu item the color changes to #1D302F and I don't want it to. When I look at the source I see the following:
.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: #1D302F; color: #fff; }
I don't know how to target the :hover of the :active menu item.
Thanks in advance!
I was able to figure this out by adding
!important;
to the end of my css. I don't know why it switches to a different color on on hover for the active element, but this fixes the issue.
Here is what the line looks like now:
.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;
}
上一篇: 解码MS的HEX RGBA