使用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;
}