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

User · Answer

You can achieve this using  not selector   HTML code    lt a class  button  gt Click me lt  a gt   lt a class  button disable  gt Click me lt  a gt    CSS code  using scss     button     background-color  red     amp  not  disable  hover          apply hover effect here               In this way you apply the hover effect style when a specified class   disable  is not applied

User · Answer

I tried the following and it works for me better  Code        unstyled-link     color  inherit    text-decoration  inherit     amp  link     amp  hover       color  inherit      text-decoration  inherit

User · Answer

Add the following to add hover effect on disabled button    buttonDisabled hover           your code goes here

User · Answer

buttonDisabled       background-color  unset  important      color  unset  important

User · Answer

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

User · Answer

Here is way to to unset the hover effect    table-hover  gt  tbody  gt  tr hidden-table hover  gt  td       background-color  unset  important      color  unset  important

User · Answer

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    lt  DOCTYPE html gt   lt html lang  quot en quot  gt     lt head gt       lt meta charset  quot UTF-8 quot    gt       lt meta name  quot viewport quot  content  quot width device-width  initial-scale 1 0 quot    gt       lt title gt Document lt  title gt       lt style gt         buttonDisabled           pointer-events  none               lt  style gt     lt  head gt     lt body gt       lt button class  quot buttonDisabled quot  gt Not-a-button lt  button gt     lt  body gt   lt  html gt

User · Answer

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

User · Answer

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    lt a href    class  btn noHover  gt You cant touch ME  P lt  a gt

[css] CSS disable hover effect

Examples related to css

Examples related to hover