css悬停过滤器在ie中不起作用

Question

您好，我有一个无法解决的问题。我希望我的缩略图显示为灰度，然后在悬停时显示为彩色。原始图像是彩色的。它适用于 Chrome 和 FF。它在 IE 中不起作用。

http://rubowarkitekter.dk/?projekt_type=undervisning

我在缩略图中添加了一个过滤器，如该线程中接受的答案中所述： Image Greyscale with CSS & re-color on mouse-over?

#projekt-image img { width: 163.33px; height: 120px; filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */ }

悬停

#projekt-image img:hover { filter: none;   -webkit-filter: grayscale(0%); }

这是我的代码

<div id="projekt-image"><a href="<?php echo add_query_arg( 'rubowtax', '1798', apply_filters('the_permalink', get_permalink())); ?>"><?php if( class_exists( 'kdMultipleFeaturedImages' ) ) {    kd_mfi_the_featured_image( 'featured-image-2', 'rubow_projekt' );} ?></a> </div>

在 IE8 和 9 中，图像以彩色显示，悬停时没有任何反应。

如果您知道我可能缺少什么，请告诉我。

Answer 1

您可以轻松地创建一个额外的样式表来定位 IE。让图像成为 CSS 上的背景图像，并将 :hover 上的图像替换为彩色图像。

以 IE 浏览器为目标：

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

只有 IE 会读取附加样式表，您可以针对特定版本的 IE： http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

祝你好运！