CSS disable hover effect
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.
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>
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.