Question

I have a div that has a background colour and it also contains an <a> with a background image. Currently i’ve got it to change the background colour of the div and the image when i hover over the image. However when i hover over the visible part of the background colour (most of it is covered by the image) only the background colour changes and not the image.

Here is the code i have.

HTML

<div id="kitchenCol">
   <a href="#" class="rollover" title="Kitchens"></a>
   <p></p>
</div><!-- End div kitchenCol -->

CSS

#kitchenCol a.rollover
{
   display:block;
   width:279px;
   height:576px;
   background:url(../images/kitchenCol.jpg);
}

#kitchenCol a.rollover:hover{background-position:-279px 0;}    
#kitchenCol{background:#cccccc;}
#kitchenCol:hover{background:#936768;}

How can i make it so both the image and the background colour changes when i hover over either the image or the background colour.

Answer 1

I am not entirely sure I understand, but try this:

#kitchenCol:hover a.rollover{background-position:-279px 0;}

Instead of #kitchenCol a.rollover:hover{background-position:-279px 0;}.

Mind that won’t work on IE6, and possibly IE7 either.