Делаем кроссбраузерное обесцвечивание элемента, неважно, изображения или блока, при наведении.
Код CSS
<style>
.b_w {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: url(grayscale.svg#greyscale); /* Firefox 4+ */
filter: gray; /* IE 6-9 */
}
</style>
Таким образом, у нас есть класс, который обесцвечивает элемент, то есть делает его чёрно-белым.
Внимание! Возможно, Вы уже увидели строчку с
filter: url(grayscale.svg#greyscale);
В ней мы подключаем файл для того, чтобы обесцвечивание работало и в Firefox.
Достаточно просто создать файл grayscale.svg и добавить в него следующее:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="greyscale">
<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>
Готово! Теперь к коду JS.
![]() | Внимание! Не забываем скачать библиотеку или подключить удалённо. |
Код JS (jQuery)
<script>
$(document).ready(function(){
$(".h").hover(
function () {
$(this).removeClass('b_w','slow');
},
function () {
$(this).addClass('b_w','slow');
}
);
});
</script>
В данном коде при загрузке документа мы обращаемся к элементам с классом h. Если на них наводится курсор, то мы удаляем класс с обесцвечиванием b_w и изображение становится цветным. Как только курсор отводится - класс добавляется вновь.
Код HTML
<img src="img/image001.png" class="h b_w">
<img src="img/image002.png" class="h b_w">
<div class="block1 h b_w"></div>