How to unbind “hover” event using JQuery?

Last Updated : 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> 