css懸停篩選器不工作在ie

嗨我有一個問題，我一直無法解決。我希望縮略圖顯示爲灰度，然後以懸停顏色顯示。原始圖像是彩色的。它適用於Chrome和FF。它在IE中不起作用。css懸停篩選器不工作在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中，圖像以彩色顯示，懸停時沒有任何反應。

請讓我知道，如果你有任何我可能會錯過的想法。

來源

2013-09-21 Ellen

你可以很容易地創建一個額外的樣式表，只是針對IE瀏覽器。將圖像作爲css上的背景圖像並替換圖像：將鼠標懸停在顏色上。

要針對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/

祝你好運！

來源

2013-09-21 17:13:42 irm

感謝您的回答。如果我不能讓另一件事工作，我會嘗試。但我應該能夠獲得當前的代碼工作。 – Ellen

css懸停篩選器不工作在ie

回答

相關問題