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