How to disable a CSS :hover effect?
Last Updated :
12 Jul, 2025
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 :
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:
How to disable a CSS :hover effect?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.
html
<!DOCTYPE html>
<html>
<head>
<title>Disable Hover Effect Using JavaScript</title>
<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() {
document.getElementById('div').classList.remove("hover");
el_down.innerHTML = "Hover effect Removed";
}
</script>
</body>
</html>
Output:
How to disable a CSS :hover effect?
Explore
JavaScript Basics
Array & String
Function & Object
OOP
Asynchronous JavaScript
Exception Handling
DOM
Advanced Topics