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.
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.