How to disable a CSS :hover effect?

Last Updated : 16 Sep, 2024

Disabling a CSS :hover effect means preventing the visual changes applied when an element is hovered over by the cursor. This can be done by overriding the :hover styles with none or applying the effect conditionally using JavaScript or specific classes to control when the hover state is active.

Here are some common approaches :

Table of Content

Using JQuery by .removeClass() method
Using JavaScript .classList.remove() method

Approach 1: Using JQuery by .removeClass() method

Using the jQuery .removeClass() method disables a CSS :hover effect by removing the class that applies the hover styling to an element. This approach provides dynamic control, allowing hover effects to be enabled or disabled based on specific interactions or conditions.

Example 1: In this example, we are using jQuery to disable a CSS :hover effect on a div. When the button is clicked, removeClass('hover') is called, removing the hover effect and updating the text.

html

<!DOCTYPE html>
<html>

<head>
    <title>Disable Hover Effect Using jQuery</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <style>
        .element {
            height: 100px;
            width: 200px;
            background: green;
            color: white;
            text-align: center;
            line-height: 100px;
        }

        .hover:hover {
            background: blue;
        }
    </style>
</head>

<body>
    <h1 id="h1" style="color:green;">GeeksforGeeks</h1>
    <p id="GFG_UP"></p>
    <div id="div" class="element hover">
        Hover It
    </div>
    <br>
    <button onclick="gfg_Run()">Click here</button>
    <p id="GFG_DOWN"></p>

    <script>
        let el_up = document.getElementById("GFG_UP");
        let el_down = document.getElementById("GFG_DOWN");
        let heading = document.getElementById("h1");
        let div = document.getElementById("div");
        el_up.innerHTML = 
          "Click on the button to remove the CSS :hover effect.";

        function gfg_Run() {
            $('#div').removeClass('hover');
            el_down.innerHTML = "Hover effect Removed";
        }        
    </script>
</body>

</html>

Output:

Approach 2: Using JavaScript .classList.remove() method

The JavaScrit .classList.remove() method in JavaScript disables a CSS :hover effect by removing the class that applies the hover styles. This approach allows dynamic control over styling, letting you toggle hover effects on or off by manipulating the class list directly.

Example : In this example we use JavaScript's .classList.remove() method to disable a CSS :hover effect on a <div>. Clicking the button removes the hover class, preventing the background color change.