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

我有一个具有背景颜色的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;}

当我将鼠标悬停在图像或背景颜色上时，如何使图像和背景颜色发生变化。

最佳答案

我不确定我是否完全理解，但是请尝试以下操作：

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

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

请注意，在IE6或IE7上均不起作用。

关于css - 将鼠标悬停在任一元素上时更改图像和背景颜色，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/9964840/