CSS make hover override active class

Question

I want to make my hover color override my active class color.

Here is my hover:

.tabs nav a:hover {
    box-shadow: inset 0 -2px #1E528A;
}

here is my active li class:

.tabs nav li.active a {
    box-shadow: inset 0 -2px #3792F5;
}

When I hover over my active class color takes precedence. I want the hover to take precedence over my active class color when hovered over. How can I do this?

Use specificity: add `.tabs nav li:active a:hover` and set it to the same as your other hover. — Heretic Monkey, Jul 13 '18 at 19:45

score 0 · Answer 1 · answered Jul 13 '18 at 19:45

You have a specificity problem. Typically this is solved by using class names on the target element itself instead of "let's traverse all the way down the DOM" selectors like .tabs nav li.active a. Therefore, to fix this problem you could add a class name, like .navigation-link to each of the <a> elements. One popularly recommended CSS methodology that avoids this problem is BEM. Take a look at this question: Points in CSS specificity

score 0 · Accepted Answer · answered Jul 13 '18 at 19:51

0

You can simply do this:

.tabs nav a:hover,
.tabs nav li.active a:hover {
    box-shadow: inset 0 -2px #1E528A;
}

or use important:

.tabs nav a:hover {
    box-shadow: inset 0 -2px #1E528A !important;
}

Hope it helps.

answered Jul 13 '18 at 19:51

Irandoust

520
4
11

1

Thanks! that helped :) – lion_bash Jul 13 '18 at 21:01

score 0 · Answer 3 · answered Jul 13 '18 at 20:59

You can do this:

.tabs nav li.active a:hover {
    box-shadow: inset 0 -2px #3792F5;
}

It should work, but it's too generic and you need to specify all the nested selectors. As suggested in a comment, you can use a descriptive class name, somethink like:

a.menuLink:hover {
   box-shadow: inset 0 -2px #3792F5;
}

In this way you only need to target your a element with the right class.

Finally, avoid using !important, it's a bad practice. You should use !important only when you don't have any other options, and this is not the case.

CSS make hover override active class

3 Answers3