How to disable a CSS :hover effect?
Last Updated :
23 Jan, 2023
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 >
< 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:
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?
Share your thoughts in the comments
Please Login to comment...