How to Remove the CSS :hover Behavior from an Element

Solutions with CSS

To remove the CSS hover effect from a specific element, you can set the pointer-events property of the element (the hover behavior of which you want to disable) to “none”.

In the example below, we have some buttons created with <div> elements. We set the display of the "button" class to "inline-block" and continue styling this class by specifying the border-radius, border, background, cursor, padding and margin properties. We add the :hover pseudo-class to the "button-blue" and "button-green" classes, but disable this behavior for the "disabled" class with the pointer-events property.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Example of removing the hover behavior with the CSS pointer-events property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .disabled {
        pointer-events: none;
        opacity: 0.3;
      }
      .button {
        border-radius: 20px;
        padding: 10px 15px;
        border: 1px solid #000;
        background: #b5b3b3;
        cursor: pointer;
        display: inline-block;
        margin: 10px;
      }
      .button-blue:hover {
        background: #75a4fa;
      }
      .button-green:hover {
        background: #53e05a;
      }
    </style>
  </head>
  <body>
    <div class="button button-blue">
      Hover over this blue button
    </div>
    <br/>
    <div class="button button-green">
      Hover over this green button
    </div>
    <br/>
    <div class="button button-blue disabled">
      This is a disabled blue button
    </div>
    <br/>
    <div class="button button-green disabled">
      This is a disabled green button
    </div>
  </body>
</html>

Result

Hover over this blue button

Hover over this green button

This is a disabled blue button

This is a disabled green button
Note that this will also disable Javascript events on that element.

In the next example, we have two classes and only one of them style with a :hover pseudo-class.

Example of applying the hover behavior to only one class:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .test {
        border: 0px;
      }
      .testhover:hover {
        border: 1px solid #0814bf;
      }
    </style>
  </head>
  <body>
    <div class="test">
      A text with a disabled hover effect
    </div>
    <div class="test testhover">
      Hover over this text
    </div>
  </body>
</html>

In our last example, we use the :not() pseudo-class to remove the hover behavior from a specified class.

Example of removing the hover behavior from an element with the CSS :not() pseudo-class:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .test:not(.nohover):hover {
        border: 1px solid #0814bf;
      }
    </style>
  </head>
  <body>
    <div class="test">
      Some text
    </div>
    <div class="test">
      Some text
    </div>
    <div class="test nohover">
      Some text with a disabled hover effect.
    </div>
  </body>
</html>