Remove hover CSS behavior from element

Question

I have CSS that changes formatting when you hover over an element   x000D   x000D   test hover   border  1px solid red    x000D   lt div class  test  gt blah lt  div gt  x000D   x000D   x000D   In some cases  I don t want to apply CSS on hover  One way would be to just remove the CSS class from the div using jQuery  but that would break other things since I am also using that class to format its child elements  Is there a way to remove  hover  css styling from an element

User · Accepted Answer

I would use two classes  Keep your test class and add a second class called testhover which you only add to those you want to hover - alongside the test class  This isn t directly what you asked but without more context it feels like the best solution and is possibly the cleanest and simplest way of doing it   Example    x000D   x000D   test    border  0px    x000D   testhover hover    border  1px solid red    x000D   lt div class  test  gt  blah  lt  div gt  x000D   lt div class  test  gt  blah  lt  div gt  x000D   lt div class  test testhover  gt  blah  lt  div gt  x000D   x000D   x000D

User · Answer

add a new  css class    test nohover hover   border  0     and   lt div id  test  class  nohover  gt blah lt  div gt    The more  specific  css rule wins  so this border 0 version will override the generic one specified elsewhere

User · Answer

Use the  not pseudo-class to exclude the classes you don t want the hover to apply to   FIDDLE   lt div class  test  gt  blah  lt  div gt   lt div class  test  gt  blah  lt  div gt   lt div class  test nohover  gt  blah  lt  div gt    test not  nohover  hover         border  1px solid red       This does what you want in one css rule

User · Answer

One method to do this is to add  pointer-events  none   to the element  you want to disable hover on   Note  this also disables javascript events on that element too  click events will actually fall through to the element behind    Browser Support    98 12  as of Jan 1  2021   This seems to be much cleaner  x000D   x000D         This allows you to disable hover events for any elements     disabled     pointer-events  none       lt -----------      opacity  0 2      button     border-radius  30px    padding  10px 15px    border  2px solid  000    color   FFF    background   2D2D2D    text-shadow  1px 1px 0px  000    cursor  pointer    display  inline-block    margin  10px      button-red hover     background  red      button-green hover     background green      x000D   lt div class  button button-red  gt I m a red button hover over me lt  div gt    lt br   gt    lt div class  button button-green  gt I m a green button hover over me lt  div gt    lt br   gt    lt div class  button button-red disabled  gt I m a disabled red button lt  div gt    lt br   gt    lt div class  button button-green disabled  gt I m a disabled green button lt  div gt  x000D   x000D   x000D

User · Answer

I also had this problem  my solution was to have an element above the element i dont want a hover effect on    x000D   x000D   no-hover   x000D    position  relative  x000D    opacity  0 65  important  x000D    display  inline-block  x000D    x000D   x000D   no-hover  before   x000D    content      x000D    background-color  transparent  x000D    position  absolute  x000D    top  0  x000D    left  0  x000D    width  100   x000D    height  100   x000D    z-index  60  x000D    x000D   lt link href  https   stackpath bootstrapcdn com bootstrap 4 0 0 css bootstrap min css  rel  stylesheet    gt  x000D   x000D   lt button class  btn btn-primary  gt hover lt  button gt  x000D   lt span class  no-hover  gt  x000D     lt button class  btn btn-primary   gt no hover lt  button gt  x000D   lt  span gt  x000D   x000D   x000D

User · Answer

You want to keep the selector  so adding removing it won t work   Instead of writing a hard and fast CSS selectors  or two   perhaps you can just use the original selector to apply new CSS rule to that element based on some criterion       test   hover    if some evaluation          this  css  border  0

[html] Remove ':hover' CSS behavior from element

Examples related to html

Examples related to css