How to disable a CSS :hover effect? - GeeksforGeeks

17 Sep, 2019
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.
<!DOCTYPE HTML>  <html>      <head>         <title>           How to Disable a CSS :hover effect.        </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;               margin: 0 auto;           }           .hover:hover {               background: blue;           }        </style>    </head>     <body style = "text-align:center;" id = "body">          <h1 id = "h1" style = "color:green;" >              GeeksForGeeks          </h1>        <p id = "GFG_UP" style = "font-size: 15px; font-weight: bold;">        </p>        <div id = "div" class = "element hover">            Hover It        </div>        <br>        <button onclick = "gfg_Run()">             Click here        </button>        <p id = "GFG_DOWN" style = "font-size: 23px;            font-weight: bold; color: green; ">        </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>     </body>  </html>
Output:
Before clicking on the button:
On hovering over the element:
After clicking on the button:
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.
<!DOCTYPE HTML>  <html>      <head>         <title>            How to Disable a CSS :hover effect.        </title>        <style>           .element {               height: 100px;               width: 200px;               background: green;               color: white;               margin: 0 auto;           }           .hover:hover {               background: blue;           }        </style>    </head>     <body style = "text-align:center;" id = "body">          <h1 id = "h1" style = "color:green;" >              GeeksForGeeks          </h1>        <p id = "GFG_UP" style = "font-size: 15px;            font-weight: bold;">        </p>        <div id = "div" class = "element hover">            Hover It        </div>        <br>        <button onclick = "gfg_Run()">             Click here        </button>        <p id = "GFG_DOWN" style = "font-size: 23px; font-weight:            bold; color: green; ">        </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>     </body>  </html>
Output:
Before clicking on the button:
On hovering over the element:
After clicking on the button:
JavaScript-Misc
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to append HTML code to a div using JavaScript ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills