Last Updated on August 25, 2022 by Roshan Parihar
In this tutorial, learn how to change div background color on hover using CSS or jQuery. The short answer is to use the CSS :hover selector with background property to give background color.
You can also use the jQuery hover() along with css() function to change the background color on <div> hover. Let’s find out with the examples given below.
Method 1: Change Div Background Color On Hover Using CSS
To create a background hover effect on the div element, you have to use the :hover css selector which uses the CSS background property. To give the background color, you can use the div class to select the div.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<style> .Divbg{ background: #ff6d05; padding: 10px; color: #fff text-align: center; width: 175px; } .Divbg:hover{ background:#05d1ff; } </style> <div class="Divbg">Hover me to change the div color on hover.</div> |
Output
Take your mouse pointer over the div box above to see the color change on hover using CSS. The background color change on hover to show div content in an attractive way.
Method 2: Using jQuery hover() with css() Function
Initially, you have to use the CSS background property to give background color to the div element. To use the jQuery method and create a hover effect or event of the mouse, you have to use the hover() function of jQuery.
Inside the function hover() function, you have to use the jQuery css() to apply the CSS background property and change the color on the hover.
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<style> .Divbgover{ background: #ff6d05; padding: 10px; color: #fff; text-align: center; width: 175px; } </style> <script> $(document).ready(function(){ $('.Divbgover').hover(function(){ $('.Divbgover').css('background','#05d1ff'); }, function(){ $(".Divbgover").css('background','#ff6d05'); }); }); </script> <div class="Divbgover">Hover me to change the div color on hover.</div> |
Output
Hover over the div box given above, this works the same as the hover effect using the CSS. I have added single CSS property here but by using the css() method, you can add single or multiple CSS properties using jQuery.
You have options to create background color on hover using CSS and jQuery. Using CSS is a simple way of creating a background hover effect while jQuery needs some script and hover function to create a hover effect.
You May Also Like to Read