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;" > w3wiki </ 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:
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;" > w3wiki </ 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: