In this tutorial, learn how to add class on hover and remove class on mouseout using jquery. You can toggle class to div on mouseover and mouseout in jQuery. Adding class requires jQuery methods and jQuery hover function on apply on mouseover.

Add Class on Hover Using jQuery

To add the class using jQuery, you have to use the addClass(). In the addClass(), you have to pass the classname as the argument to apply and add the class to the div element. If you have certain stylings with the class your are going to add, the styling automatically applies on hover.

Output

This is the div to show add class on hover using jquery

Hover over the div element given in the example above to add the class and the styles with the class automatically applies.

Remove Class on Hover Using jQuery

You can also remove the added class using jQuery. To remove the class on hover, you have to use the jQuery removeClass() and pass the class as the argument of the function. The class argument is the class you want to remove from the div element.

Output

This is the div to show how to remove class on hover using jquery

The above example contains the added CSS class. If you want to remove the class, you need to hover over the div element given above.

Add/Remove(Toggle) Class on Hover Using jQuery

In addition to the above examples, you can use toggleClass() to perform both add/remove class on hover of the div element. This is the single function which can perform both the add and remove function with jQuery.

Output

This is the div to show how to remove class on hover using jquery

Mouse over the above example to add the class on hover and mouseout to remove the class on hover.

If you want to learn more about jQuery methods to add or remove classes, you may like jQuery Add/Remove Class Methods.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.