How to create a custom jQuery Plugin ?

Last Updated : 28 Apr, 2025

In this article, we will see the creation of a custom jQuery plugin that will change the background color of an element when the mouse hovers over it. The plugin takes a color as an argument and sets the background color of each element to that color when the element has hovered over. When the mouse leaves the element, the original background color is restored.

Approach 1: The $.fn namespace is used to specify the plugin function, which allows us to enhance jQuery's capabilities with our own custom methods. The plugin function accepts a color as an argument and changes the background color of each element in the set when it is hovered over using jQuery's hover() method. The plugin function additionally saves each element's original background color in a variable so that it can be restored when the mouse leaves the element. Using jQuery's chaining syntax, the plugin function is then called on a group of items.

Example: In this example, we define a custom jQuery plugin function called hoverBackgroundColor. This function takes a color as an argument and sets the background color of each element in the set to that color when the element has hovered over. When the mouse leaves the element, the original background color is restored. We use the plugin on the set of elements with a class of elements by calling $('.my-elements .element').hoverBackgroundColor('red') in the $(function() {...}) block. This sets the background color of each element to red when hovered over.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Custom jQuery Plugin Example</title>
    <link rel="stylesheet" href="style.css">
    <script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
    </script>
    <script src="script.js"></script>
</head>

<body>
    <h1 style=color:green;>
        GeeksforGeeks
    </h1>
    
    <h3>Custom jQuery Plugin Example</h3>
    
    <div class="my-elements">
        <div class="element">Element 1</div>
        <div class="element">Element 2</div>
        <div class="element">Element 3</div>
    </div>
</body>

</html>

style.css

CSS

.my-elements .element {
      padding: 10px;
      margin-bottom: 10px;
      border: 1px solid black;
}

script.js

JavaScript

// Define the plugin function

$.fn.hoverBackgroundColor = function (color) {

    // Iterate over each element in the set
    this.each(function () {
        var $this = $(this);

        // Set the original background color
        var originalColor = $this.css('background-color');

        // Change the background color of 
        // the element on hover
        $this.hover(function () {
            $(this).css('background-color', color);
        }, function () {
            $(this).css('background-color', originalColor);
        });
    });

    // Return the jQuery object
    // to allow for chaining
    return this;
};

// Use the plugin on a set of elements
$(function () {
    $('.my-elements .element')
        .hoverBackgroundColor('red');
});

Output:

Approach 2: Using CSS Transitions: In this approach, we use CSS transitions to smoothly animate the background color change on hover. We define a transition property in the CSS that specifies a 0.2-second duration and an ease-in-out timing function. Then, in JavaScript, we use the jQuery hover() method to add and remove the 'red' background color on the hover and on the mouse left.

Example: This is another example that illustrates the creation of a custom jQuery Plugin that is utilized to animate & change the background color on hover.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        jQuery Hover Background Color Example
    </title>
    <link rel="stylesheet" href="style.css">
    <script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
    </script>
    <script src="script.js"></script>
</head>

<body>
    <h1 style=color:green;>
          GeeksforGeeks
      </h1>
    
      <h3>Custom jQuery Plugin Example</h3>
    
      <div class="my-elements">
        <div class="element">Element 1</div>
        <div class="element">Element 2</div>
        <div class="element">Element 3</div>
    </div>
</body>

</html>

style.css

CSS

.my-elements .element {
      padding: 10px;
      margin-bottom: 10px;
      border: 1px solid black;
      transition: background-color 0.2s ease-in-out;
}

script.js