Как применить стили hover?

Question

[Sanzhar Bazarbek]

Добрый день! Есть иконка, при наведении она должен менять фон и саму иконку
Хочу взять пример с https://nn.formpit.ru, в самом низу в блоке "Контакты"

Проблема: там используется after, before - даже полностью скопировав кусок кода - он не меняется
Можете помочь с кодом и обьяснить почему так?

Сайт https://nn.formpit.ru
В самом низу, нужно именно Instagram и WhatsApp

Comments

[Антон Р.]

Где именно в примере?

[Sanzhar Bazarbek]

Сайт https://nn.formpit.ru
В самом низу, нужно именно Instagram и WhatsApp

[v3shin]

А в чем проблема скопировать стили?

[Ankhena]

v3shin, оттуда их точно копировать не стоит, менять цвет у SVG путем замены всей картинки это шаг на 10 лет назад.

Sanzhar Bazarbek у вас много вариантов
1. Использовать шрифтовые иконки типа fontawesome (если их в проекте много, или шрифт отредактирован и оставлены только нужные, то пойдет)
2. Использовать векторный спрайт, use и менять fill у иконок при наведении на ссылку. css.yoksel.ru/svg-groups-use
3. Заинлайнить svg (либо использовать внешний спрайт, но из svg, а не symbol либо спрайт из symbol, view, use) в CSS и применять filter.

[Леонид Роженцев]

В принципе можноприменить стили напрямую к svg элементу. Только для этого нужно найти в коде, каким элементам нужно присвоить класс для изменения цвета

Answer 1

[Сергей Кутузов]

Один из вариантов: две картинки друг над другом, используем position, в нормальном состоянии одной задаём opacity: 0; другой opacity: 1;, при наведении наоборот.