Как при hover img не менять background картинки?

Question

[Aleks Kirilov]

Нужно так:



Получается так:

Comments

[Froggyweb]

svg iccon через спрайт или шрифт

[Aleks Kirilov]

Froggyweb,
вот такая структура
кому прописать hover

...

[Aleks Kirilov]

Вот такая структура
куда Hover

<li>
                <a class="food-list__special" href="#">
                  <img src="img/food-filter__img-1.svg" alt="" />
                  <p class="fool-list__subtitle">
                    Dinner
                  </p>
                </a>
              </li>

[Froggyweb]

Aleks Kirilov, тебе надо встроить svg в разметку чтобы с помощью css менять свойства, например fiill

Answer 1

[Максим Сохряков]

Использует svg. И пользуйтесь css параметром fill для задания цвета иконки.
Чтобы работал fill, необходимо, чтобы в коде самого svg всем fill был задан none.
Иначе css свойство fill ничего вам не даст.

Comments

[Aleks Kirilov]

можете объяснить пожалуйста по подробнее?

[Максим Сохряков]

Постараюсь сделать на codepen пример.

[Aleks Kirilov]

ок, спасибо

[Максим Сохряков]

Aleks Kirilov, https://codepen.io/MiMEKiZ/pen/KKpaLbN?editors=1100
Обратите внимание:
при наведении на первый блок у галочки меняется цвет.
У второго блока такого эффекта не наблюдается п.ч. для элемента галочки в svg прописано fill="white", а значит и fill от css не работает.
Для второго блока svg похожая история.

[Aleks Kirilov]

Максим Сохряков, Ок, спасибо