Change Div Background Color On Hover Using CSS or jQuery

In this tutorial, learn how to change div background color on hover using CSS or jQuery. The background color change on hover to show div content in an attractive way.

You have options to create background color on hover using CSS and jQuery. Using CSS is the simple way of creating background hover effect while jQuery need some script and hover function to create hover effect.

The hover effect of div here using the CSS background propery to apply CSS using jQuery. Here, I am also using jQuery css() method also to add CSS to HTML element.

I am adding single CSS property here but by using the css() method, you can add single or multiple CSS properties using jQuery.

Change Div Background Color On Hover Using CSS

To create a background hover effect on div, you have to give the background color using the div class and the class with hover css selector. See the example below, you can use the example given below or you can change the color as per your requirement.


This is div whose color change on hover.

Take your mouse pointer over the div box given above to see the color change on hover using CSS. If you want to change the color using the jQuery, you have to check below example using jQuery css();

Change Div Background Color On mouseover Using jQuery

To use the jQuery method and create hover effect, you have to give background color initially using CSS. After that, you can use the script using the jQuery css() to apply the CSS background property and change the color. In addition to this, you also need to add the else function to apply the initial CSS background color using jQuery.

See the example to find out how to perform this task. It uses the jQuery hover function to use the hover event of mouse and apply the CSS using the jQuery.


This is div whose color change on mouseover.

Hover over the div box given above, this works same as the hover effect using the CSS.

Hope, you like the tutorial given here. If you have any query, please comment below to get the solution of your query.

Leave a comment

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.