Подмена цвета PNG при наведении мыши

257

20 февраля 2019, 18:20

Подскажите, как с помощью CSS, при наведении курсора, заменить цвет PNG-иконки (например, такой: ) с серого на красный.

Спасибо.

Answer 1

На кроссбраузерность не проверял...

img:hover { 
  -webkit-filter: sepia(1) hue-rotate(320deg) saturate(10); 
  filter: sepia(1) hue-rotate(320deg) saturate(10); 
}

<img src="https://i.stack.imgur.com/rbcA9.png">

Источник

Answer 2

Подготовьте отдельный спрайт с иконками разных цветов (как показано ниже). В CSS-стилях зафиксируйте размеры блока. Задайте для блока фоновое изображение. У псевдокласса :hover пропишите смещение этого изображения равное высоте (или ширине) картинки. В результате получится элемент, который чуть-чуть изменяется при наведении указателя мыши.

.i-folder { 
  height: 42px; 
  width: 57px; 
  background: url(https://i.stack.imgur.com/jjpgK.png); 
} 
.i-folder:hover { 
  background-position: 0px 42px; 
}