Как изменить цвет картинки при наведении css
Перейти к содержимому

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

  • автор:

Как изменить цвет ссылки при наведении?

Для изменения цвета текстовой ссылки при наведении на неё курсора мыши применяется псевдокласс :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
  • Состояния кнопок
  • Сочетание с псевдоклассами
  • Спрайты
  • Типы ссылок
  • Установка фона и градиента
  • Фоновая картинка

Подмена цвета 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
34.2k 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,602 4 4 золотых знака 30 30 серебряных знаков 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,643 2 2 золотых знака 16 16 серебряных знаков 40 40 бронзовых знаков

  • html
  • css
  • hover
  • png
    Важное на Мете
Связанные
Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

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

Как изменить цвет картинки при наведении указателя мыши с помощью CSS?

Как изменить цвет картинки при наведении указателя мыши с помощью CSS?

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

Вот как можно добиться данного эффекта с помощью только лишь CSS:

HTML код:

Код CSS:

/*
* у изображения с данным стилем цвет черно-белый
*/
.grayscale-image
-webkit-transition: 3s;
-moz-transition: 3s;
-ms-transition: 3s;
-o-transition: 3s;
transition: 3s;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
>

/*
* при наведении курсора мыши применяем к изображению фильтр через css свойство filter
*/
.grayscale-image:hover
-webkit-transition: 3s;
-moz-transition: 3s;
-ms-transition: 3s;
-o-transition: 3s;
transition: 3s;
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
>

Таким образом, данный стиль можно применять не только к изображениям в блоке наши клиенты, но и к блоку поделиться там, где иконки социальных сетей. Обратите внимание, что в стилях мы указываем css свойства с вендорными префиксами, чтобы эффект одинаково работал в различных браузерах.

Создано 26.11.2019 13:49:29

  • Михаил Русаков
  • Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

    Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
    Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

    Если Вы не хотите пропустить новые материалы на сайте,
    то Вы можете подписаться на обновления: Подписаться на обновления

    Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

    Порекомендуйте эту статью друзьям:

    Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

    1. Кнопка:
      Она выглядит вот так:
    2. Текстовая ссылка:
      Она выглядит вот так: Как создать свой сайт
    3. BB-код ссылки для форумов (например, можете поставить её в подписи):

    Комментарии ( 0 ):

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2024 Русаков Михаил Юрьевич. Все права защищены.

    Как поменять цвет img при hover?

    da3bd5ecd9bd422c843de05a208cee2d.png

    как с помощью css при hover на img поменять у img цвет? допустим на #f23535
    Сама картинка :

    • Вопрос задан более трёх лет назад
    • 14795 просмотров

    Комментировать
    Решения вопроса 1

    DVerkh

    Full Stack веб-разработчик

    Преобразуйте изображения в иконочные шрифты и меняйте цвет как у обычного текста.
    Урок от WebDesign Master как это можно сделать.

    Ответ написан более трёх лет назад
    Нравится 1 2 комментария

    artlivee

    Артём Цымбалюк @artlivee Автор вопроса
    Дмитрий Верхоумов видимо вы не ту ссылку дали

    DVerkh

    Артём Цымбалюк: точно, начиналось всё с этого: https://www.youtube.com/watch?v=YDKskOH5sSw
    Ответы на вопрос 5

    NN-webmaster

    Алексей Сол @NN-webmaster
    Обожаю веб

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

    А так — спрайты, иконочные шрифты как посоветовали выше.

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *