使用 CSS 在鼠标悬停时进行灰度化和颜色恢复

可以通过多种方法实现鼠标悬停时进行颜色恢复的灰度外观，在 IE 和 Firefox 中提供跨浏览器兼容性。

方法 1：纯 CSS（使用单个彩色图像）

此技术利用带有供应商前缀的过滤器属性在所有支持的浏览器中对图像进行灰度化：

img.grayscale {
  filter: url("data:image/svg xml;utf8, ..."); /* Firefox 3.5  */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19 , Safari 6  */
}

img.grayscale:hover {
  filter: none;
  -webkit-filter: grayscale(0%);
}

方法 2：纯 CSS（使用两个图像）

另一种方法涉及使用两个图像：灰度版本和彩色版本。最初显示灰度图像，悬停状态转换为彩色图像：

img {
  transition: all .6s ease;
}

img:hover {
  opacity: 0;
}

.grayscale {
  opacity: 1;
}

方法 3：带有 CSS 滤镜的 SVG

对于 IE10 和现代浏览器，内联 SVG 可以是用于应用滤镜，允许动态控制灰度效果：

svg image {
  transition: all .6s ease;
}

svg image:hover {
  opacity: 0;
}