Change the background image of div on hover?

I can't work out how to change the background image of ".home_link_cont" from /images/home_page_links_off.png to /images/home_page_links_ovr.png on hover.

Can this be achieved with CSS or jQuery?


<script src="">

<style type="text/css">

.hoverClassName {
     background: url('/images/home_page_links_ovr.png') !important;

	width: 245px;
	height: 265px;
	background-image: url(/images/home_page_links_off.png);
	font-family: "Comic Sans MS", cursive;
	text-decoration: none;

.home_link_cont a:link{
	text-decoration: none;

	margin: 0 auto;
	width: 180px;
	height: 180px;

	margin: 0 auto;
	width: 235px;
	height: 35px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 18px;
	color: #000;
	text-align: center;
	font-style: italic;
	font-weight: normal;


<div id="home_page_links">

<a href="/index.php?page=display_products&product_category=152">
<div class="home_link_cont">
<div class="home_link_image"><img align="middle" src="/uploads/1176_1_sml.jpg" alt="BOOK STAND" border="0" /></div>
<div class="home_link_text">HOMEWARES</div>

<a href="/index.php?page=display_products&product_category=158">
<div class="home_link_cont">
<div class="home_link_image"><img align="middle" src="/uploads/1081_1_sml.jpg" alt="WALL DECAL" border="0" /></div>
<div class="home_link_text">KIDS</div>

<a href="/index.php?page=display_products&product_category=154">
<div class="home_link_cont">
<div class="home_link_image"><img align="middle" src="/uploads/1099_1_sml.jpg" alt="DECORATIVE HOOKS" border="0" /></div>
<div class="home_link_text">BEACHSIDE</div>

<a href="/index.php?page=display_products&product_category=159">
<div class="home_link_cont">
<div class="home_link_image"><img align="middle" src="/uploads/1075_1_sml.jpg" alt="WINE TABLE" border="0" /></div>
<div class="home_link_text">FURNITURE</div>

</div><!-- end of home_page_links -->

Open in new window

Who is Participating?
GaryConnect With a Mentor Commented:
    background-image: url(/images/home_page_links_ovr.png);

Open in new window

Why are you using !important.  That should not be necessary unless you have a design defect.

sabecsAuthor Commented:
Thanks Gary, that is perfect...
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.