CSS disable hover effect

css hover

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?

What “hover effect” are you talking about?

Seetpal singh

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>

Well this disable all kind of events on the element as well. In this scenario, all button would become unclickable.

@ 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. <div class='hover noHover'>Some content</div> won't affect any other element with only the hover class.

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.

@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 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.

Simone Colnaghi

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.

can you explain &:not(.disable):hover

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 :)

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

He's asking for css not scss. You are just complicating things.

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

Pawan Kumar

Here is way to to unset the hover effect.

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

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.

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

BiscuitBaker

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.

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.

shinobi

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.

John Snyder

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?

Joel Youngberg

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.

Jaroslav Bezděk

Add the following to add hover effect on disabled button:

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

this doesn't answer the question.

@DrLightman you can set inverse logic here so that it seems hover effect does nothing

Sitaram Mulik

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.

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review

Ali

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;
  }
}

stevec

Follow WeChat

Success story sharing

Want to stay one step ahead of the latest teleworks?

Subscribe Now

CSS disable hover effect

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Contact US