How to unbind “hover” event using JQuery?
The problem unbind the hover effect of particular element with the help of JQuery. Here we are using 2 JQuery methods .unbind() and .off() method. Here are few techniques discussed.
Approach:
- Select the element whose Hover effect needs to be unbinded.(Make sure Hover effect should be added by JQuery only, Hover effect added by CSS doesn’t work here).
- Use either .unbind() or .off() method.
- Pass the events that we want to turn off for that particular element.
Example 1: This example using the .unbind() method.
<!DOCTYPE HTML> <html> <head> <title> How to unbind “hover” event using JQuery? </title> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" > </script> <style> #div { height: 100px; width: 200px; background: green; color: white; margin: 0 auto; } </style> </head> <body style= "text-align:center;" > <h1 id= "h1" style= "color:green;" > w3wiki </h1> <p id= "GFG_UP" style= "font-size: 15px; font-weight: bold;" > </p> <div id= "div" > Hover It </div> <br> <button onclick= "gfg_Run()" > Unbind </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 unbind the hover from the element." ; $( "#div" ).hover( function () { $( this ).css( "background-color" , "blue" ); }, function () { $( this ).css( "background-color" , "green" ); }); function gfg_Run() { $( '#div' ).unbind( 'mouseenter mouseleave' ); el_down.innerHTML = "Hover effect Unbinded." ; } </script> </body> </html> |
Output:
-
Before clicking on the button:
-
On hovering over the element:
-
After clicking on the button:
Example 2: This example using the .off() method.
<!DOCTYPE HTML> <html> <head> <title> How to unbind “hover” event using JQuery? </title> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" > </script> <style> #div { height: 100px; width: 200px; background: green; color: white; margin: 0 auto; } </style> </head> <body style= "text-align:center;" > <h1 id= "h1" style= "color:green;" > w3wiki </h1> <p id= "GFG_UP" style= "font-size: 15px; font-weight: bold;" > </p> <div id= "div" > Hover It </div> <br> <button onclick= "gfg_Run()" > Unbind </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 unbind the hover from the element." ; $( "#div" ).hover( function () { $( this ).css( "background-color" , "blue" ); }, function () { $( this ).css( "background-color" , "green" ); }); function gfg_Run() { $( '#div' ).off( 'mouseenter mouseleave' ); el_down.innerHTML = "Hover effect Unbinded." ; } </script> </body> </html> |
Output:
-
Before clicking on the button:
-
On hovering over the element:
-
After clicking on the button:
Contact Us