How to disable a CSS :hover effect?

The task is to remove the CSS:hover property from the element. Here we are going to use JavaScript to solve the problem. 

Approach 1:

• Simply remove the class which is adding the hover effect to the element using JQuery by .removeClass() method.

Example 1: This example using the approach discussed above. 

html

<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;
    }
    .hover:hover {
        background: blue;
    }
</style>
<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>
    var el_up = document.getElementById("GFG_UP");
    var el_down = document.getElementById("GFG_DOWN");
    var heading = document.getElementById("h1");
    var 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>

Output:

How to disable a CSS :hover effect?

Approach 2:

• Simply remove the class which is adding the hover effect to the element using JavaScript by .classList.remove() method.

Example 2: This example using the approach discussed above. 

html

<style>
    .element {
        height: 100px;
        width: 200px;
        background: green;
        color: white;
    }
    .hover:hover {
        background: blue;
    }
</style>
<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>
    var el_up = document.getElementById("GFG_UP");
    var el_down = document.getElementById("GFG_DOWN");
    var heading = document.getElementById("h1");
    var div = document.getElementById("div");
    el_up.innerHTML =
    "Click on the button to remove the CSS:hover effect.";
    function gfg_Run() {
            document.getElementById('div').classList.remove("hover");
        el_down.innerHTML = "Hover effect Removed";
    }
</script>

Output:

How to disable a CSS :hover effect?