Как изменить цвет иконки при наведении css

Подмена цвета 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
33k 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,552 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.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Подмена цвета 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
33k 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,552 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.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как изменить цвет иконки при наведении css

Подскажите, какими наиболее лучшими способами (по кросс-браузерности и кросс-платформенности) решить следующую задачу: имеется картинка на данный момент png с прозрачным задним фоном:

Нужно чтобы при наведении менялся цвет линий, т.е. линии иконки , к примеру, становились красными. Какие есть варианты, кроме SVG?

Смена цвета иконки при наведении, Font Awesome
В общем такая ситуация. Использую иконки font awesome и для них применяется анимация :hover с.

Изменение цвета при наведении
Добрый вечер! Изучаю html+css. Дошел до практики и столкнулся со следующей проблемой: Как.

Изменение цвета текста при наведении
нужно чтоб при наведении в область меннялся цвет области и цвет некоторого текста

Изменение цвета при наведении курсора
Всем, привет. Всем здравствуйте. Уважаемые гуру CSS. Need your help. В чем заключается вопрос.

Красивые эффекты для иконок при наведении с помощью CSS3 переходов

Иконки. Сегодня они присутствуют везде, в наших приложениях и сайтах, и все они выполняют важные функции. Они указывают пользователям на различные варианты взаимодействия или направляют их по различным внешним ссылкам, например, по ссылкам на социальные сети и другие медиа-сервисы. Иконочные спрайты стали обычным явлением, и важны с точки зрения разработчиков, а также позволяют привлечь внимание пользователей благодаря использованию CSS классов, срабатывающих при наведении. Данные классы способны добавить больше интерактивности и стиля нашим приложениям/сайтам. В этой обучающей статье я планирую показать вам 5 разных состояний иконок, когда на них наведен курсор мыши, для создания которых используются CSS3 переходы и трансформации. Рассмотренные далее состояния иконок будут лучше привлекать внимание конечных пользователей, и, возможно, будут увеличивать показатели кликабельности элементов на сайте или в приложении.

Разметка для наших иконок

Для данной обучающей статьи мы будем использовать иконки, которые ссылаются на что-нибудь, потому что ссылки ассоциируются с состояниями, возникающими при наведении курсора мыши. Наиболее частным примером использования набора иконок, который можно встретить в сети, являются социальные иконки. Я буду использовать следующие 5 иконок, чтобы мы могли увидеть разное поведение иконок в действии:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Каждая из иконок будет иметь по три разных класса:

Класс icon, который является общим для всех иконок

Класс icon-type, который является уникальным для каждого демо-примера

Класс name, который позволит нам позиционировать фоновое изображение, в зависимости от отображаемой иконки, а также использовать различные цвета и т.д.

Красивые эффекты для значков при наведении с помощью CSS3

Рассмотрим пять разных состояний значков, когда на них наведён курсор мыши, для создания которых используются CSS3 переходы и трансформации. Для каждого примера используется спрайт изображений.

Общий CSS-код для значков

Создадим общий код для значков.

Эффект № 1 – Одноцветный значок с изменяющимся фоном

Допустим нас есть спрайт, и каждый значок имеет два варианта. Мы можем применить переход к свойству background, чтобы одно изображение перетекало в другое при наведении. Поскольку мы используем переход для свойства background, мы можем также изменить при наведении и свойство background-color. Вот наш CSS:

Эффект №2 – Приподнятый значок с изменяющейся границей

Имитируем границу, используя псевдо-элемент и анимируя его за счет изменения высоты. Для псевдо-элемента будет задан фоновый цвет, и значок будет приподниматься на расстояние равное высоте псевдо-элемента, как будто ее «подталкивают» вверх. Вот CSS:

Эффект №3 – Значок, появляющийся слева

В данном примере будет отображаться обычная одноцветная иконка. Когда пользователь наведет курсор мыши на значок, то цветной вариант значка «выплывает» слева и выталкивает одноцветный вариант иконки. Мы снова будем использовать псевдо-элемент, на этот раз для двух состояний (обычного и при наведении), оставив обычный элемент с классом .icon в качестве контейнера. Псевдо-элемент будет плавно перемещаться внутри контейнера благодаря свойству left, и за счет свойства transition «скольжение» элементов будет плавным. Вот CSS:

Эффект №4 – Сплошной фон, с анимацией переходящий в тонкую рамку

В данном примере по умолчанию для всех значков будет задан сплошной фоновый цвет. При наведении будет осуществляться переход фона в тонкую рамку, используя свойство box-shadow, которое будет иметь значение inset. Тень будет указана для псевдо-элемента, расположенного позади иконки. Для самой тени не будет использовано вообще никакого размытия, т.е. будет отображаться сплошной фон. При наведении мы будем уменьшать значение.

Эффект №5 – Вращение кубической иконки

В данном примере будут использоваться CSS3 перспективы, позволяющие создавать фигуры, у которых как будто есть объем и глубина (3D). Будем использовать стандартный элемент в качестве контейнера и два псевдо-элемента в качестве лицевой и обратной сторон куба. При наведении куб будет вращаться по оси X, создавая классный эффект.

Создаём и используем символьный SVG-спрайт

SVG — масштабируемая векторная графика.

Сама по себе технология SVG — это очень объёмная тема — подробнее с ней можно познакомится на MDN Web Docs

В данной статье мы будем использовать иконки созданные по технологии SVG. Их отличие в том, что при изменении размеров они не теряют качества отображения, при этом весят обычно меньше, чем аналогичная иконка в другом формате, например PNG

Аналогичные иконки при масштабировании в формате SVG и PNG

Способы использования SVG-иконок

SVG-иконки можно использовать несколькими способами

1й способ — сохранить SVG-иконку как файл, и подключать как обычное изображение

При таком способе подключения, SVG-иконка будет масштабироваться без потери качества, но нельзя будет задать цвет иконки через CSS, и следовательно не получится плавно менять цвет иконки при наведении. И если в другом месте нужно будет использовать эту же иконку в другом цвете, необходимо будет создавать дополнительный файл SVG иконки

2й способ — открыть файл SVG-иконки в текстовом редакторе, скопировать код иконки и вставить его в необходимую часть HTML.

Если использовать SVG-иконку таким способом, можно будет задать цвет иконки через CSS, и получится сделать плавное изменение цвета при наведении. Но если придется использовать эту же иконку в другом месте, то это будет дополнительная нагрузка на браузер, так как иконка будет отрисовываться заново при каждом использовании

3й способ — самый оптимальный способ использовать SVG-иконки — сделать символьный SVG-спрайт. При таком способе каждая иконка отрисовывается всего один раз в скрытом блоке, а затем может быть использована неограниченное количество раз, ссылаясь на уже отрисованную иконку. При этом, одной и той же иконке в разных местах можно задавать свой цвет через CSS, следовательно не нужно дублировать иконку и можно делать плавное изменение цвета при наведении.

Этот способ и рассмотрим подробнее

Создаём и используем символьный SVG-спрайт

Символьный SVG-спрайт — это просто коллекция символьных SVG-иконок, собранных в одном, обычно скрытом, специальном блоке

Для примера скачаем пару SVG-иконок, например, на сайте https://uxwing.com/ с бесплатными иконками

Чтобы автоматически создать SVG-спрайт, воспользуемся онлайн-сервисом https://svgsprit.es/

Просто перетаскиваем все необходимые файлы SVG-иконок на главную страницу https://svgsprit.es/, и внизу страницы автоматически будет сгенерирован код, состоящий из двух частей

Первая часть — символьный SVG спрайт

Вторая часть — код использования

Создадим HTML разметку, в которую добавим сгенерированный символьный SVG-спрайт и сразу используем иконки в необходимых местах

Добавим стили

Прежде чем задавать цвет иконки в CSS, необходимо убедиться, что у кода иконки в SVG-спрайте отсутствуют свойства fill и stroke . Если эти свойства присутсвуют в коде иконки, то необходимо их удалить, так как приоритет CSS свойств будет ниже, чем у inline-стилей, и значения, указанные в CSS будут игнорироваться

Чтобы через CSS задать цвет для SVG-иконки, используем свойства fill и stroke

fill — заливка иконки

stroke — цвет обводки

Если иконка состоит только из обводки, то чаще всего для свойства fill необходимо указать значение transparent , чтобы у иконки не было чёрной заливки по-умолчанию

Получаем следующий результат

Итоги

Использование SVG-иконок имеет несколько преимуществ — возможность масштабирования без потери качества, плавное изменение цвета, меньший вес, нет необходимости дублировать иконки, если они отличаются по цвету, размеру.

В статье рассмотрели как быстро и просто создать символьный SVG-спрайт и оптимально использовать SVG-иконки

Похожие публикации:

1. Как в css оформляются неотображаемые комментарии
2. Как в css сделать таблицу
3. Как сделать темную тему html css
4. Как сделать треугольник на css

Как правильно вставлять в сайт иконки

Как правильно работать с иконками на сайте? Как я понимаю, необходимо использовать SVG-иконки. Но такой вопрос, а если надо например, чтобы при наведении цвет иконки менялся?

Отслеживать
51.6k 200 200 золотых знаков 61 61 серебряный знак 242 242 бронзовых знака
задан 12 сен 2021 в 14:58
Константин Константин
81 5 5 бронзовых знаков
Можете картинками, можете svg через стили перекрашивать, можете через шрифт.
12 сен 2021 в 15:04

@nazarpunk, могу попросить Вас чуть подробнее по поводу перекрашивания SVG: есть возможность сделать это через CSS?

12 сен 2021 в 15:23
можно и через обычный css вставлять svg без лишних проблем
13 сен 2021 в 1:48

вот к примеру обе иконки из обоеих ответов которые я вывел из css в html: codepen.io/topicstarter/pen/VwWWmYZ

13 сен 2021 в 4:59

@Айболит на мой взгляд это утонченное извращение. Дважды добавлять код одной и той же иконки с помощью background:url() Первый раз с одним цветом, во второй раз иконка добавляется при наведении с другим цветом. Наверное лучше, если уж иконка добавляется background:url(), то изменять её цвет при наведении с помощью css фильтров

13 сен 2021 в 16:02

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Если вы добавляете иконку SVG в HTML документ инлайн, то есть просто копируете код иконки внутрь HTML, то проблем со стилизацией из внешней CSS, вообще нет.

Задаете цвет иконки в исходном состоянии и при наведении.

svg < width: 100px; >#path < fill:black; transition: all 0.5s; >#path:hover

Ещё вариант с использованием css filter drop-shadow

svg < width: 100px; transition: all 0.5s; >svg:hover

Иконка добавлена из внешнего ресурса с помощью тега

В этом случае цвет иконки можно менять при наведении с помощью фильтров CSS или SVG

img < width:100px; height:100px; >img:hover

Отслеживать
ответ дан 12 сен 2021 в 16:41
Alexandr_TT Alexandr_TT
109k 23 23 золотых знака 112 112 серебряных знаков 374 374 бронзовых знака
Большое Вам спасибо!
12 сен 2021 в 18:09

Получается, что нет возможности через SVG, существующий отдельно от разметки HTML определить все возможные пути для дальнейшего использования через отдельными SVG? То есть, спрайт-лист определений должен быть зашит в разметку? Есть возможность прикрепить один файл со всеми определениями иконок, через CSS, может быть, или JS?

13 сен 2021 в 18:40

@Leonid если добавлен SVG файл с помощью , то не возможно его стилизовать обычными правилами CSS, так как это по сути изолированный объект, по поведению ничем не отличается от растровой картинки. Но если добавить svg файл — спрайт со стороннего ресурса с помощью , а далее вызывать отдельные иконки из спрайта по ID с помощью то стилизация, интерактивность вполне возможна. Этому посвящён целый раздел на SO — svg-спрайт