Подмена цвета PNG при наведении мыши
Подскажите, как с помощью CSS, при наведении курсора, заменить цвет PNG-иконки (например, такой: ) с серого на красный.
Отслеживать
10.4k 21 21 золотой знак 25 25 серебряных знаков 53 53 бронзовых знака
задан 14 окт 2018 в 15:39
Vadim Rudenko Vadim Rudenko
21 1 1 серебряный знак 2 2 бронзовых знака
сделать ещё одну иконку красного цвета и менять её при наведении
14 окт 2018 в 15:42
Если png, то цвет background можно менять по :hover
14 окт 2018 в 18:06
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
В CSS3 это возможно с помощью свойства filter :
img:hover
Цепочка фильтров такова (порядок важен!):
- sepia — по сути, делает изображение монохромным с рыжим оттенком;
- hue-rotate — вращение цветового круга до нужного оттенка;
- saturate — насыщенность цвета.
Чтобы какой-либо цвет превратить в белый:
body < background: #ccc; >img:hover
Здесь цепочка следующая:
- grayscale — обесцвечиваем изображение;
- brightness — устанавливаем яркость с заведомо завышенным значением.
Отслеживать
ответ дан 14 окт 2018 в 18:59
33.7k 6 6 золотых знаков 29 29 серебряных знаков 71 71 бронзовый знак
я дико извиняюсь, а как из красного, при наведении, сделать белый цвет картинки
1 авг 2020 в 8:27
@MikhaelBalkizov: дополнил.
5 авг 2020 в 15:54
Подготовьте отдельный спрайт с иконками разных цветов (как показано ниже). В CSS-стилях зафиксируйте размеры блока. Задайте для блока фоновое изображение. У псевдокласса :hover пропишите смещение этого изображения равное высоте (или ширине) картинки. В результате получится элемент, который чуть-чуть изменяется при наведении указателя мыши.
.i-folder < height: 42px; width: 57px; background: url(https://i.stack.imgur.com/jjpgK.png); >.i-folder:hover
Отслеживать
ответ дан 14 окт 2018 в 20:17
8,592 4 4 золотых знака 29 29 серебряных знаков 53 53 бронзовых знака
div < -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-image: url('https://image.flaticon.com/icons/svg/1086/1086563.svg'); width: 50px; height: 50px; display: inline-block; background-color: #000; >div:nth-child(1) < background: linear-gradient(#e74c3c, #f1c40f); >div:nth-child(2) < background-color: #1842de; >div:nth-child(3) < background-color: #ffff00; >div:nth-child(4) < background-color: #3498db; >div:nth-child(5) < background-color: #9b59b6; >div:nth-child(6)
Отслеживать
ответ дан 5 авг 2020 в 16:20
4,470 1 1 золотой знак 16 16 серебряных знаков 39 39 бронзовых знаков
- html
- css
- hover
- png
-
Важное на Мете
Связанные
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.1.8.3130
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как изменить цвет ссылки при наведении?
Для изменения цвета текстовой ссылки при наведении на неё курсора мыши применяется псевдокласс :hover, который добавляется к селектору A . Сперва через селектор A задаём цвет обычных ссылок, затем с помощью :hover задаём цвет ссылок при наведении (пример 1).
Пример 1. Изменение вида ссылки
В данном примере ссылка становится подчёркнутой и меняет свой цвет, когда на неё наводится указатель (рис. 1). Заметьте, что псевдокласс :hover в коде идёт после :visited . Это имеет значение, иначе посещённые ссылки не будут менять свой цвет.
Рис. 1. Вид ссылки при наведении
Аналогично можно поменять и цвет фона под ссылкой при наведении на неё, добавив свойство background к селектору a:hover , как показано в примере 2.
Пример 2. Изменение цвета фона ссылки
Результат данного примера показан на рис. 2. Чтобы текст плотно не прилегал к фону, к селектору A добавлено свойство padding.
Рис. 2. Изменение цвета фона ссылки
См. также
- :focus на мобильных устройствах
- background
- color
- currentColor
- text-fill-color
- Анимация ссылок при наведении
- Атрибут link
- Виды ссылок
- Всплывающая подсказка
- Единицы цвета в CSS
- Использование :hover
- Линейный градиент
- Наследование в CSS
- Несколько фоновых картинок
- Нормальное позиционирование
- Переходы с помощью :hover
- Подсветка строк и колонок таблицы
- Псевдокласс :hover
- Псевдоклассы в CSS
- Работа с типографикой
- Селекторы CSS
- Состояния кнопок
- Сочетание с псевдоклассами
- Спрайты
- Типы ссылок
- Установка фона и градиента
- Фоновая картинка
Как поменять цвет img при hover?
как с помощью css при hover на img поменять у img цвет? допустим на #f23535
Сама картинка :
- Вопрос задан более трёх лет назад
- 14424 просмотра
Комментировать
Решения вопроса 1
Full Stack веб-разработчик
Преобразуйте изображения в иконочные шрифты и меняйте цвет как у обычного текста.
Урок от WebDesign Master как это можно сделать.
Ответ написан более трёх лет назад
Нравится 1 2 комментария
Артём Цымбалюк @artlivee Автор вопроса
Дмитрий Верхоумов видимо вы не ту ссылку дали
Артём Цымбалюк: точно, начиналось всё с этого: https://www.youtube.com/watch?v=YDKskOH5sSw
Ответы на вопрос 5
Алексей Сол @NN-webmaster
Обожаю веб
Действительно, просто поменять цвет с помощью CSS никак. Единственный вариант, если вы хотите прослыть знатным извращенцем, то можете попробовать при наведении задавать блоку абсолютную позицию, смещать его за пределы экрана, а на его месте оставлять тень, заданную с помощью фильтров. Предупреждаю, прокатит не со всеми картинками.
А так — спрайты, иконочные шрифты как посоветовали выше.
Как плавно изменить цвет ссылки?
Цвет ссылки устанавливается через свойство color, которое добавляется к селектору A . Для изменения цвета ссылки при наведении на неё курсора мыши применяется псевдокласс :hover, а чтобы смена цвета происходила плавно, к селектору A следует добавить свойство transition, значением которого выступает время. Оно указывается обычно в секундах или миллисекундах (пример 1).
Пример 1. Изменение цвета ссылок
В данном примере для наглядности выбраны контрастные цвета и задано время перехода одна секунда. На рабочем сайте время перехода подбирайте по своему вкусу и желанию.
См. также
- :focus на мобильных устройствах
- color
- currentColor
- text-fill-color
- transition
- Анимация кнопок при наведении
- Анимация ссылок при наведении
- Атрибут link
- Виды ссылок
- Всплывающая подсказка
- Единицы цвета в CSS
- Использование :hover
- Множественные переходы
- Наследование в CSS
- Нормальное позиционирование
- Переходы
- Переходы в действии
- Переходы и анимация
- Переходы с помощью :hover
- Подсветка строк и колонок таблицы
- Псевдокласс :hover
- Псевдоклассы в CSS
- Работа с типографикой
- Селекторы CSS
- Состояния кнопок
- Сочетание с псевдоклассами
- Типы ссылок