Как менять цвет svg иконки при наведении?

280
01 февраля 2018, 16:28

Как через :hover менять цвет svg иконки?

Answer 1

Можно использовать css-свойство fill:

svg:hover {
  fill: цвет;
}

Сниппет:

svg:hover { 
  fill: teal; 
} 
 
svg { 
  width: 50vmin; 
  height: 50vmin; 
}
<svg viewBox="0 0 24 24"> 
    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/> 
    <path d="M0 0h24v24H0z" fill="none"/> 
</svg>

READ ALSO
Преобразование анимации SVG SMIL в анимацию CSS
CSS

Преобразование анимации SVG SMIL в анимацию CSS

Мой текущий пример SVG анимирован с использованием анимации SVG SMIL:

 339
как убрать отступы от края браузера в css-grid
CSS

как убрать отступы от края браузера в css-grid

Слева и справа появляются оступы от границ блока до границ браузера

 329
Как правильно разместить блоки?
CSS

Как правильно разместить блоки?

Здравствуйте! Скажите, как сделать так, как в макете? Надпись "Мы хотим сделать этот мир лучше" становится посередине, а нужно как в макете

 473
Одинаковая высота блоков в Swiper 4.1.x (Firefox)
CSS

Одинаковая высота блоков в Swiper 4.1.x (Firefox)

Для сайта понадобилась адаптивная карусель элементов, взял за основу Swiper последней версии 41+, в итоге получилось так, что в Chrome все блоки одной...

 835