将鼠标悬停在任一元素上时更改图像和背景颜色

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都不起作用。