Столкнулся с проблемой, есть кнопка с картинкой svg, при наведении на кнопку нужно поменять стиль кнопки и цвет этого изображения. Если первое не вызывает затруднений, то со вторым проблемы. Знаю что можно менять цвет картинки svg через fill, но чего-то не работает, возможно я сам не до конца понимаю как его использовать. Ещё как вариант вижу, просто заменить картинку на такую же, просто другого цвета, но не до конца понимаю как.
.imga{
color: rgb(35, 112, 142);
}
.imga:hover{
border-radius: 10px;
color: red;
font-size: 14px;
}
Ответ
Обычно для такого используют css background. Если добавлять svg через тег img, то повлиять на стили нельзя. Сделайте две картинки (или спрайт), этого будет достаточно. Есть варианты использования keyframes, svg, анимации, анимации с javascript, но это уже избыточно. Пример анимации SVG-иконки.
.imga {
color: rgb(35, 112, 142);
height: 24px;
width: 120px;
background-size: 18px;
background-repeat: no-repeat;
background-position: 5px left;
transition: all .2s;
}
.imga {
background: url('https://www.shareicon.net/data/128x128/2016/07/10/119178_chat_512x512.png') 5px center no-repeat;
background-size: 18px;
}
.imga:hover{
border-radius: 10px;
color: red;
font-size: 14px;
background: url('https://www.shareicon.net/data/512x512/2016/01/03/697450_chat_512x512.png') 5px center no-repeat;
background-size: 18px;
}
Комментариев нет:
Отправить комментарий