悬停时黑白 CSS 背景

Question

我有一个CSS精灵，如下所示：

.HTML

<a id="estates" href="http://www.domain.com/estate"></a>

.CSS

#estates {background-position: -200px 0px;width: 96px;height: 90px;}
#estates {background: url("http://www.domain.com/images/sprite.png") no-repeat scroll 0% 0% transparent;float: left;margin: 22px -2px 30px 33px;}

我希望当用户将鼠标悬停在链接上以将图像颜色更改为黑白或覆盖透明 png 时（如果无法发生这种情况）？

Answer 1

您可以查看CSS灰度滤镜。其大致如下：

#estates:hover {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: url(grayscale.svg); /* Firefox 4+ */
  filter: gray; /* IE 6-9 */;
}

只是不要忘记添加跨浏览器支持所需的其他一百种东西

我找到了其他一百种东西并添加了它们。