Изменить изображение и цвет фона при наведении на любой элемент

Question

У меня есть div, который имеет цвет фона, а также содержит <a> с фоновым изображением.В настоящее время у меня есть это, чтобы изменить цвет фона div и изображения, когда я наводю курсор на изображение.Однако при наведении курсора на видимую часть цвета фона (большая часть которого покрыта изображением) меняется только цвет фона, а не изображение.

Вот код, который у меня есть.

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;}

Как мне сделать так, чтобы и изображение, и цвет фона менялись, когда я наводил курсор на изображение или цвет фона.

Answer 1

Я не совсем уверен, что понимаю, но попробуйте это:

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

Вместо #kitchenCol a.rollover:hover{background-position:-279px 0;}.

Имейте в виду, что это не сработает в IE6 и, возможно, в IE7.