How to unbind “hover” event using JQuery? - GeeksforGeeks

06 Sep, 2019
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;">              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=     "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;">              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:
jQuery-Misc
JQuery
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Form validation using jQuery
How to Dynamically Add/Remove Table Rows using jQuery ?
Scroll to the top of the page using JavaScript/jQuery
How to get the ID of the clicked button using JavaScript / jQuery ?
jQuery | children() with Examples
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?