Как изменять путь к картинкам при наведении из HTML?

Question

[Kardamon90]

Доброго времени суток, на сайте имеется такой элемент, в котором при наведении должен изменяться цвет иконки с черного на белый. Так как это контентная иконка, то для корректного редактирования в будущем сайта на CMS, пути к ней должны быть прописаны в HTML файле. Ни иконочный шрифт не подвязать получается, ни через background в css не сделать. Подскажите в какой способ можно такое реализовать?

Answer 1

[Максим]

https://codepen.io/topicstarter/pen/bGxMQPz - может такая штука подойдёт ?

Answer 2

[Анатолий Куликов]

Еще вариант к указанному - использовать svg, у которого менять параметр fill при наведении

Comments

[Максим]

Evgenii, можно использовать цветную иконку на которой в css будет filter grayscale ну при наведении сами знаете

Answer 3

[whoiam_frontend]

Вы можете использовать две картинки для иконки: черную и белую. Затем создайте класс в CSS, который будет менять путь к картинке на белую версию иконки при наведении. Например:

HTML:

```
< img src="black-icon.png" class="icon">
```

CSS:

```
.icon:hover {
  content: url('white-icon.png');
}
```

Также можно использовать атрибут srcset, чтобы задать несколько путей к разным версиям картинки. Например:

HTML:

```
<img src="black-icon.png" srcset="white-icon.png 1x" class="icon">
```

CSS:

```
.icon:hover {
  content: url('white-icon.png');
}
```

Причем тут хаб JavaScript я так и не понял.

Answer 4

[Froggyweb]

Грузить в админке только svg и встраивать его в html.
не разделяю мнения, что иконки - это контент.

Comments

[Kardamon90]

Ну это иконки относящиеся к категории товаров, соответсвенно, другая категория = другая иконка. Как это будет меняться в админке не знаю, мне нужно просто свертстать так, что бы бекендер потом мог изменять пути из хтмл

[Froggyweb]

Kardamon90, прямо в html <svg бла -бла бла></svg>

Answer 5

[Игорь]

Это всё просто делается в css: "элемент a:hover { прописать необходимые изменения }", пара, тройка строк и прибудет с тобой сила!)))