html - 灰度颜色在 IE 11 浏览器中不起作用

Question

我想在加载时以灰色显示图像，当用户将鼠标悬停在图像上时，它应该显示图像的原始颜色。

我试过下面的代码，它在 chrome 浏览器中工作，但在 IE 浏览器中不工作

CSS 代码:

.testImage img {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    transition: filter 600ms ease;
    -webkit-transition: -webkit-filter 600ms ease;
    -o-transition: filter 600ms ease;
    -moz-transition: filter 600ms ease;
    -ms-transition: filter 600ms ease;

}

.testImage img:hover {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);   
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
}

<div class="testImage">   

<img title="Sample Title" src="http://www.w3schools.com/html/pic_mountain.jpg">
    
</div>

JSFiddle 链接:https://jsfiddle.net/samalaraj72/ehu77xy7/1/

请帮助我如何在 IE 浏览器中解决此问题，

提前致谢。

Answer 1

试试这个

testImage img:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}