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.

Answer 1

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> 

Answer 2

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.