css фильтр наведения не работает в т.е.

Привет, у меня проблема, которую я не смог решить. Я хочу, чтобы мои миниатюры отображались в оттенках серого, а затем в цвете при наведении. Исходное изображение цветное. Работает в Хроме и ФФ. Это не будет работать в IE.

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

Я добавил фильтр к своим миниатюрам, как объяснено в принятом ответе в этой теме: Изображение в оттенках серого с помощью CSS и изменение цвета при наведении курсора мыши?

#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 изображения отображаются в цвете, и при наведении ничего не происходит.

Пожалуйста, дайте мне знать, если у вас есть идеи о том, что я мог пропустить.


wordpress image internet-explorer hover svg-filters
person Ellen    schedule 21.09.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете легко создать дополнительную таблицу стилей только для 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/

Удачи!

person irm    schedule 21.09.2013
comment
Спасибо за Ваш ответ. Я попробую это, если я не могу заставить другую вещь работать. Но я должен быть в состоянии заставить текущий код работать. - person Ellen; 21.09.2013