0

こんにちは、解決できない問題があります。サムネイルをグレースケールで表示し、ホバー時にカラーで表示したい。元画像はカラーです。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 では、画像はカラーで表示され、ホバーしても何も起こりません。

私が見逃している可能性のあるものについて何か考えがあれば教えてください。

4

1 に答える 1

0

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/

幸運を！

于 2013-09-21T17:13:42.700 に答える