CSS disable hover effect

Question

I need to disable the mouse hover on a particular button(not on all buttons) in the entire DOM. Please let me know how to achieve it using a CSS class.

i am using the below CSS class when my button is disabled. now i want to remove the hover effect using the same class.

.buttonDisabled
 {
 Cursor:text !important; Text-Decoration: None !important; 
 }

The above class will take care of removing the hand sign and text underline on mouse over . Now i want to remove hover effect also. Please let me know.

What properties are set on the element? Background color? – Nov 05 '14 at 10:14 — , Nov 05 '14 at 10:14
What “hover effect” are you talking about? – Jukka K. Korpela Nov 05 '14 at 10:29 — Jukka K. Korpela, Nov 05 '14 at 10:29

score 276 · Answer 1 · answered Dec 26 '16 at 09:07

276

I have really simple solution for this.

just create a new class

.noHover{
    pointer-events: none;
}

and use this to disable any event on it. use it like:

<a href='' class='btn noHover'>You cant touch ME :P</a>

answered Dec 26 '16 at 09:07

Seetpal singh

3,505
1
15
12

105

Well this disable all kind of events on the element as well. In this scenario, all button would become unclickable. – Shikatsu Kagaminara Mar 27 '17 at 15:42
6

@ Shikatsu Kagaminara. This only disables the event for the element you apply the class to. I may not understand what the problem you and 25 other people have with this solution. `
Some content
` won't affect any other element with only the `hover` class. – Altimus Prime Dec 15 '19 at 03:47
I agree. This is a very useful property in the current use case. A disabled control is generally not something you want users interacting with. Any sign that a user can interact with the control just adds to the confusion. Disabling all pointer events is a neat trick and it seems to be well supported. – flayman Aug 19 '20 at 21:48
2

@AltimusPrime : The problem is that question asks for a solution to disable mouse hover. But this solution disables all mouse events. So the button wont even receive click events for example. – shinobi Jul 04 '21 at 09:38
@shinobi The OP asks specifically for "when my button is disabled" which means that the button should not be clickable. Otherwise simply adjust the css hover event to match the default style, which might be the answer you're looking for yourself. – Altimus Prime Jul 06 '21 at 14:20
What if I have a link inside the row and the row needs to have pointer-events: none? I can't use a link inside it but I wish to disable a hover in HTML inline (without CSS). – LosmiNCL Sep 27 '22 at 17:17
1

That wouldn't prevent users from :focus-ing on the anchor item with a keyboard though. – forkinspace Oct 05 '22 at 13:17

score 46 · Answer 2 · answered Apr 18 '19 at 10:37

46

You can achieve this using :not selector:

HTML code:

<a class="button">Click me</a>
<a class="button disable">Click me</a>

CSS code (using scss):

.button {
  background-color: red;
  &:not(.disable):hover {
    /* apply hover effect here */
  }   
}

In this way you apply the hover effect style when a specified class (.disable) is not applied.

answered Apr 18 '19 at 10:37

Simone Colnaghi

682
8
11

can you explain `&:not(.disable):hover` – Gobliins Jun 24 '20 at 11:27
3

The :not selector is used the apply style to all elements that DON'T have the class specified between brackets. In this case we're specifying style on hover on all elements with class 'button' which don't have the class 'disable'. Hope it's clear now :) – Simone Colnaghi Jun 24 '20 at 15:11
1

I think he meant the amperstand, this is SCSS and not plain CSS, it needs to be compiled, but the question is only about CSS and not SCSS, so this answer could use an edit – Tofandel Oct 26 '21 at 12:37
1

He's asking for css not scss. You are just complicating things. – dotnethaggis Nov 23 '21 at 14:50
3

Here the css... button { background-color: red; } .button:not(.disable):hover { /* apply hover effect here */ } – Simone Colnaghi Nov 24 '21 at 12:08

score 17 · Answer 3 · answered May 14 '19 at 06:49

17

Here is way to to unset the hover effect.

.table-hover > tbody > tr.hidden-table:hover > td {
    background-color: unset !important;
    color: unset !important;
}

answered May 14 '19 at 06:49

Pawan Kumar

734
9
14

I don't believe it's recommended to use the !important indicator. I think that's only reserved for special cases only, which doesn't apply here. – Saturn K Jan 15 '21 at 16:48
2

It applies if the element already has property with `!important` set and you can't change that because of the lib of framework used, then this use is warranted. From the question you can see the element does have it with `!important` already so it's the only way to overwrite it – Tofandel Oct 26 '21 at 12:39

score 14 · Answer 4 · answered Sep 03 '21 at 23:57

For this I ended up using an inline style because I only wanted the one particular element not to have any hover on-click event or style due to it just being part of instructions regarding the other buttons that looked like it on the page, and to give it override precedence. Which was this:

<button style="pointer-events:none"></button>

This removed all styling and bound JavaScript/JQuery functionality on the single element for me, while not affecting the others on the page :). For more info see the mozilla reference.

Note that it may also be helpful/appropriate to use an id in a case such as this. — Joel Youngberg, Sep 04 '21 at 00:10

score 8 · Answer 5 · edited Jan 30 '17 at 16:01

8

To disable the hover effect, I've got two suggestions:

if your hover effect is triggered by JavaScript, just use $.unbind('hover');
if your hover style is triggered by class, then just use $.removeClass('hoverCssClass');

Using CSS !important to override CSS will make your CSS very unclean thus that method is not recommended. You can always duplicate a CSS style with different class name to keep the same styling.

edited Jan 30 '17 at 16:01

BiscuitBaker

1,421
3
23
37

answered Nov 05 '14 at 11:10

infiniteloop

885
2
12
29

tbh, using 2 different languages is even worse then using 1 with !importend. With a bit of practice there are many ways you can write CSS without using to much of the !importend property. – Niels Lucas Mar 21 '19 at 12:56

score 7 · Answer 6 · answered Feb 03 '21 at 01:21

Do this Html and the CSS is in the head tag. Just make a new class and in the css use this code snippet:

pointer-events:none;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .buttonDisabled {
        pointer-events: none;
      }
    </style>
  </head>
  <body>
    <button class="buttonDisabled">Not-a-button</button>
  </body>
</html>

What if you still want to be able to click it? – Chris Bordeman Jan 10 '22 at 00:09 — Chris Bordeman, Jan 10 '22 at 00:09

score 6 · Answer 7 · edited Dec 30 '19 at 12:14

6

Add the following to add hover effect on disabled button:

.buttonDisabled:hover
  {
    /*your code goes here*/     
  }

edited Dec 30 '19 at 12:14

Jaroslav Bezděk

6,967
6
29
46

answered Nov 05 '14 at 11:09

Rasel

5,488
3
30
39

14

this doesn't answer the question. – DrLightman Apr 21 '20 at 08:16
@DrLightman you can set inverse logic here so that it seems hover effect does nothing – Rasel Apr 29 '20 at 11:20

score 6 · Answer 8 · answered Nov 05 '14 at 11:19

From your question all I can understand is that you already have some hover effect on your button which you want remove. For that either remove that css which causes the hover effect or override it.

For overriding, do this

.buttonDisabled:hover
{
    //overriding css goes here
}

For example if your button's background color changes on hover from red to blue. In the overriding css you will make it as red so that it doesnt change.

Also go through all the rules of writing and overriding css. Get familiar with what css will have what priority.

Best of luck.

score 5 · Answer 9 · answered Dec 09 '21 at 22:10

5

Use transition: all 100s ease-in-out; to override the hover change. This is not a solution but a workaround if you do not know the original value of the property which you want to replace.

answered Dec 09 '21 at 22:10

Sitaram Mulik

51
1
1

This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/30550857) – codwell Dec 13 '21 at 11:01

score 2 · Answer 10 · answered Jul 13 '21 at 15:40

2

Other solutions didn't work for me.

I simply changed this

.home_page_category_links {
  color:#eb4746;
}

to this:

.home_page_category_links, .home_page_category_links:hover {
  color:#eb4746;
}

That means the same styles that are applied to elements of that class are also applied to elements of that class when hovered.

Extra note: If you're keeping the colour the same, perhaps you may also want to avoid any underline, if so, just include text-decoration: none; as well (or text-decoration: none !important; if using bootstrap).

answered Jul 13 '21 at 15:40

stevec

41,291
27
223
311

doing this for text is fine, but what would be the case for images, In my case I display a brightened version of the image on hover and I display darkened version of the image when not hovered, I knew this is not the best solution I tried linear-image as well, but didn't get the result I want, So my question is, for my mobile screen I don't want the hover effect so I place the same Image url, but I wonder if the user clicks the image does the browser tries to reload the same url, or will not perform any task. – M NARESH Sep 09 '22 at 16:20

score 1 · Answer 11 · edited Jun 17 '20 at 07:32

1

I tried the following and it works for me better

Code:

.unstyled-link{ 
  color: inherit;
  text-decoration: inherit;
  &:link,
  &:hover {
    color: inherit;
    text-decoration: inherit;
  }
}

edited Jun 17 '20 at 07:32

Ali

2,702
3
32
54

answered Jun 17 '20 at 00:23

user8702464

19
1

Mohammed Ahmad · Answer 12 · 2022-07-17T11:19:12.610

0

What I did here is that I make the hover effect on the button but doesn't apply to the button that has the disabled class

button:hover:not(button.disabled){
  background-color: rgb(214, 214, 214);
  color: rgb(0, 0, 44);
}

edited Jul 17 '22 at 11:19

answered Jul 17 '22 at 11:17

Mohammed Ahmad

1
1

score 0 · Answer 13 · edited Jan 14 '23 at 22:31

Problem which I understood - Well I was doing something the same as yours. I have used four links among which two of them will hover and the other two will not. Now that I have used the a tag(hyperlink tag in HTML) to use hover, all my hyperlinks start hovering, which I don't want.

So, I put the two a tags which were not supposed to hover inside the same class, say .drop, and use the class to specify that I want all a tags inside the dropped class not to hover but the other a tags do.

To do so, I just wrote a CSS

a:not(.drop):hover {background-color: limegreen}

what I meant here is that apply a hover to all the tags but not the ones which are inside the .drop class.

Hope that helps!

@Simone Colnaghi was the first to mention it, and it worked for me too.

score 0 · Answer 14 · edited Jan 26 '23 at 12:04

0

I have also faced the similar problem but the below method works for me.

Lets suppose you have two class, wantsHover and dontWantsHover just use:

.wantsHover:not(.dontWantsHover):hover {
    background-color: red;        
}

edited Jan 26 '23 at 12:04

Sean

6,389
9
45
69

answered Jan 24 '23 at 05:19

Kousik Alam

1
1

score 0 · Answer 15 · answered Apr 25 '23 at 18:12

0

you can use background-color: none; It won't run because this is an invalid property value

But it will prevent any hover colors that you have and don't know the source of that style.

answered Apr 25 '23 at 18:12

Omar Hegazi

122
1
6

CSS disable hover effect

15 Answers15

Linked

Related