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

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上都无法工作。