Как сделать чтобы изображение svg при наведение меняло цвет?

Рейтинг: 0Ответов: 2Опубликовано: 05.04.2023

Не могу понять как сделать, чтобы при наведение на иконки-менялся фон иконки. Я делаю через hover-у меня не получается. Буду признателен любой помощи.

.img{}
.img:hover{
fill:blue;
}
<div class="container__images">
  <div class="container__image">
    <img class="img" src="https://static.tildacdn.com/tild3835-3864-4631-a336-323562643836/01.svg">
    <span class="content__text_small">Яндекс</span>
  </div>
  <div class="container__image">
    <img class="img" src="https://static.tildacdn.com/tild3030-6430-4466-a230-376632616439/02.svg">
    <span class="content__text_small">Гугл</span>
  </div>
  <a href="">
    <div class="container__image">
      <img  class="img" src="https://static.tildacdn.com/tild6639-6365-4261-b236-393131633765/07.svg">
      <span class="content__text_small">Отзовик</span>
    </div>
  </a>
</div>

css html
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Как уже писал @Simon, у элемента img нет свойства fill. Свойство сработает только в том случае, если у вас код содержит само SVG-изображение, а не ссылку.

Вот как это может работать (сделал на примере первой картинки - дальше сами):

.container__image:hover img,
.container__image:hover svg path:not(:last-of-type) {
  fill: blue;
}
<div class="container__images">
  <div class="container__image">
    <svg xmlns="http://www.w3.org/2000/svg" width="54" height="54" fill="none"> <path fill-rule="evenodd" clip-rule="evenodd" d="M33.524 22.142l9.574-4.362c0 7.637-5.276 15.529-9.956 23.047l-8.023 11.91 3.51-21.746 4.896-8.849z" fill="#E00000"/> <path d="M26.955 33.48c8.947 0 16.2-7.254 16.2-16.2 0-8.947-7.253-16.2-16.2-16.2s-16.2 7.253-16.2 16.2c0 8.946 7.253 16.2 16.2 16.2z" fill="#F33"/> 
        <path d="M26.955 23.734a6.454 6.454 0 100-12.909 6.454 6.454 0 000 12.91z" fill="#fff"/> 
        </svg>
    <span class="content__text_small">Яндекс</span>
  </div>
  <div class="container__image">
    <img class="img" src="https://static.tildacdn.com/tild3030-6430-4466-a230-376632616439/02.svg">
    <span class="content__text_small">Гугл</span>
  </div>
  <a href="">
    <div class="container__image">
      <img class="img" src="https://static.tildacdn.com/tild6639-6365-4261-b236-393131633765/07.svg">
      <span class="content__text_small">Отзовик</span>
    </div>
  </a>
</div>

▲ 1

Я находила один способ, но работало только на цветных картинках. Покажу на своем коде. Нужно применить filter и по градусам уже задавать цвет.

  .profile_social_link>img:hover {
  filter: hue-rotate(135deg);
<a target="_blank" class="profile_social_link" href="#">
  <img src="img/profile/vk_blue.svg" alt="vk">
</a>