How to create a plugin that can add/remove a class on hover using jQuery ?

Last Updated : 22 Feb, 2022

There are two ways to create a plugin that can add and remove a class on hovering on an HTML element.

Approach 1: Using the this property & hover() and toggleClass() methods in jQuery.

A simple plugin $.fn.hoverClass = function(e) {..} is created with an anonymous function attached to it. The parameter “e” takes in a class to add or remove on hover. This function returns the hover() method which is attached to the HTML element using this plugin due to the fact that the this property is used. Another anonymous function is defined within this hover() method which alternates between adding and removing the class on the HTML element using the toggleClass() method & the this property, this time in the form of a jQuery object meaning that we can bind jQuery methods to that particular element. The class which is toggled is passed in the parameter of the method attached to the plugin as discussed earlier.

Example: The following example illustrates the use of a plugin to add and remove a class “on-hover” which changes the background colour and the font colour of a division element.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> 
    </script> 
    <!-- Basic inline styling -->
    <style> 
      body { 
        text-align: center; 
      } 
  
      h1 { 
        color: green; 
        font-size: 40px; 
      } 
  
      p, 
      div { 
        font-size: 30px; 
        font-weight: bold; 
      } 
  
      div { 
        display: inline-block; 
        cursor: pointer; 
        padding: 0.5rem; 
        background-color: #222221; 
        color: lightgreen; 
      } 
  
      .on-hover { 
        background-color: green; 
        color: white; 
      } 
    </style> 
</head> 
<body> 
    <h1>GeeksForGeeks</h1> 
    <p>jQuery - Add and remove a class on hover using a plugin</p> 
    <div>Geeks</div> 
    <script type="text/javascript"> 
      (function ($) { 
        $.fn.hoverClass = function (e) { 
          return this.hover(function () { 
            $(this).toggleClass(e); 
          }); 
        }; 
      })(jQuery); 
      $("div").hoverClass("on-hover"); 
    </script> 
</body> 
</html>

Output:

Approach 2: Using the this property & hover(), addClass() and removeClass() methods in jQuery.

The same plugin $.fn.hoverClass = function(e) {..} is created as before but the key difference is that there are two separate anonymous functions defined within the hover() method instead of one anonymous function. The first anonymous function adds a class to the HTML element using the this object & addClass() method in jQuery and the second anonymous function removes a class from the HTML element using the this object & removeClass() method in jQuery. These two anonymous functions coupled together have the same effect as the toggleClass() method in jQuery leading to the desired effect.

Example: The following example illustrates the use of a plugin to add and subsequently remove a class “on-hover” which changes the background colour and the font colour of a division element.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> 
    </script> 
    <!-- Basic inline styling -->
    <style> 
      body { 
        text-align: center; 
      } 
  
      h1 { 
        color: green; 
        font-size: 40px; 
      } 
  
      p, 
      div { 
        font-size: 30px; 
        font-weight: bold; 
      } 
  
      div { 
        display: inline-block; 
        cursor: pointer; 
        padding: 0.5rem; 
        background-color: #222221; 
        color: lightgreen; 
      } 
  
      .on-hover { 
        background-color: green; 
        color: white; 
      } 
    </style> 
</head> 
<body> 
    <h1>GeeksForGeeks</h1> 
    <p>jQuery - Add and remove a class on hover using a plugin</p> 
    <div>Geeks</div> 
    <script type="text/javascript"> 
      (function ($) { 
        $.fn.hoverClass = function (e) { 
          return this.hover( 
            function () { 
              $(this).addClass(e); 
            }, 
            function () { 
              $(this).removeClass(e); 
            } 
          ); 
        }; 
      })(jQuery); 
      $("div").hoverClass("on-hover"); 
    </script> 
</body> 
</html>