<!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>