How to override CSS :hover?

Question

I have this HTML code:

<ul>
    <li>Line 1</li>
    <li class="disabled">Line 2</li>
</ul>

And the corresponding CSS is:

ul li:hover {
    color: red;
}

This allows for both lis to be hovered over and have their color changed. But if I want one of them to be disabled, I’d use the following:

.disabled {
    color: grey;
}

But the other CSS code’s hover pseudo-class still has effect. Is there any way I can override this?

score 47 · Accepted Answer · edited Sep 24 '20 at 14:10

47

The first rule overrides it because of CSS specificity, i.e. it's more specific.

Change second rule to:

ul li.disabled, ul li.disabled:hover{
    color:grey;
}

edited Sep 24 '20 at 14:10

NearHuscarl

66,950
18
261
230

answered Aug 12 '11 at 03:56

Ruxta

696
6
8

2

Using !important can come back to bite you, @Procrammer 's approach is a better option. – irama Aug 12 '11 at 04:01
Won't work if the item should be grey all the time not just on hover: http://fiddle.jshell.net/88Z5Q/1/ – Jon P Aug 12 '11 at 04:01
4

I also found out that it would be worthwhile to use something like `ul li:not(.disabled):hover{color:red}` - That would apply the hover effect to all li elements which do not have the class .disabled added... – Abhishek Aug 12 '11 at 04:03
Related note: "text-decoration" cannot be overridden. - http://stackoverflow.com/questions/4481318/css-text-decoration-property-cannot-be-overridden-by-child-element – Curtis Yallop Dec 21 '13 at 00:53

Jon P · Answer 2 · 2022-09-18T05:12:57.947

11

Change your CSS To:

ul li:hover{
    color:red;
}

.disabled ,.disabled:hover{
    color:grey;
}

See this fiddle

Updating for the 2020s, you can now use :not to your advantage

.disabled {
    color:grey;
}

ul li:not(.disabled):hover{
    color:red;
}

<ul>
    <li>Line 1</li>
    <li class="disabled">Line 2</li>
</ul>

edited Sep 18 '22 at 05:12

answered Aug 12 '11 at 03:56

Jon P

19,442
8
49
72

score 1 · Answer 3 · answered Aug 12 '11 at 04:00

You just need to change your css:

ul li:hover{ color:red; }

ul li.disabled,ul li.disabled:hover{ color:grey; }

You have to disable the hover effect, so you give it the same color as when it wasn't hovered.

score 0 · Answer 4 · answered Aug 12 '11 at 03:52

0

.disabled{
    color:grey !important;
}

answered Aug 12 '11 at 03:52

hazzik

13,019
9
47
86

8

Try and avoid using !important where possible. It can lead to maintenance issues. – joshnh Aug 12 '11 at 04:01
I agree... Though this does fix the example, the development case will need more finesse... – Abhishek Aug 12 '11 at 04:02
1

Why it should be avoided? Can you give me a link with description? – hazzik Aug 12 '11 at 04:03
2

In larger projects you can end with a ball mud where everyone tries to override styles. Using !important is a sign for having bad structured CSS. First they try to using longer selectors and at the end you have bunch of !important statements. So !important isn't evil but its indicates that your CSS isn't well structured. Take a look at OOCSS and this blog: http://www.stubbornella.org/ to learn more about on how to build css that scales. – Andreas Köberle Aug 12 '11 at 08:35

Matt Roy · Answer 5 · 2012-11-07T16:11:28.880

I was trying to get a CSS "disabled" effect to be applied automatically when doing the following javascript:

  document.getElementById("TheButton").disabled = true;

If "TheButton" is defined with the class "TheClass":

  .TheClass { background-color: LightBlue; }
  .TheClass:hover { background-color: Cyan; }

The only thing that worked for me was with this CSS:

  .TheClass[disabled]            { background-color: lightgrey; } /* for IE */
  .TheClass[disabled='disabled'] { background-color: lightgrey; } /* for Chrome */
  .TheClass[disabled]:hover            { background-color: lightgrey; } /* for IE */
  .TheClass[disabled='disabled']:hover { background-color: lightgrey; } /* for Chrome */

score -1 · Answer 6 · answered Sep 03 '13 at 15:05

Minimum, if only need grey at every time, no need :hover on .disabled

ul li:hover{
  color:red;
}
ul li.disabled{// Last rule precedence
   color:grey;
}

Or for speed updating, use !important:

.disabled{
  color:grey !important;
}
ul li:hover{
   color:red;
}

Madhukar Upadhyay · Answer 7 · 2017-12-06T11:46:12.277

-1

You can just do following in the css to discard any color for disabled elements while we hover on it.

ul li:hover:not(:disabled) {
        color: red;
    }

This will cause the color red to be applied only when list is not disabled.

edited Dec 06 '17 at 11:46

answered Dec 05 '17 at 08:52

Madhukar Upadhyay

1
2

`:active` means "while being clicked on" (ish) not "while not disabled" – Quentin Dec 05 '17 at 09:44

How to override CSS :hover?

7 Answers7

Linked