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.
Prerequisite: jQuery plugins
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>
Output:
Similar Reads
How to add and remove CSS classes to an element using jQuery ? In this article, we will see how to add or remove the CSS classes to an element using jQuery. To add the CSS classes to an element we use addClass() method, and to remove the CSS classes we use removeClass() method. Syntax: The syntax for adding CSS classes to an element: $('selector').addClass(clas
2 min read
How to add <li> class to active and leave it after hover using jQuery ? Bootstrap 4 is an open-source CSS framework used for frontend development of web applications. Bootstrap along with HTML and Javascript enrich the user interface for better user experience. jQuery is a Javascript framework that is used to execute Javascript functions. jQuery has similar functionalit
4 min read
How to add a new class to an element that already has a class using jQuery ? In this article, we will learn to add a new class to an element that already has a class using jQuery. There are different methods of achieving this task using the built-in methods available in jQuery. The approaches we can use to add a class to an element using jQuery are listed below:Table of Cont
3 min read
How to add a class on click of anchor tag using jQuery ? In this article, we will see how to add a class on click of an anchor tag using jQuery. To add a class on click of the anchor tag, we use the addClass() method. The addClass() method is used to add more properties to each selected element. It can also be used to change the property of the selected e
2 min read
How to create a pop-up div on mouse over and stay when click using jQuery ? In this article, we will learn how to create a pop-up div on mouseover and stay when click using jQuery. Approach: First, we create an HTML div element that we want to pop up when we mouse over on an element and set its display property to none in CSS style.display:none;In the script tag, we create
2 min read
How to remove all CSS classes using jQuery ? In this article, we will remove all CSS classes for an element using jQuery. To remove all CSS classes of an element, we use removeClass() method. The removeClass() method is used to remove one or more class names from the selected element. Syntax: $(selector).removeClass(class_name, function(index,
2 min read