Для изменения цвета текстовой ссылки при наведении на неё курсора мыши применяется псевдокласс :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
Состояния кнопок
Сочетание с псевдоклассами
Спрайты
Типы ссылок
Установка фона и градиента
Фоновая картинка
Как с помощью CSS изменить картинку при наведении курсора
Как добиться смены картинки при наведении? Это можно реализовать с помощью css.
Объяснение. Как мы сделали, чтобы картинка менялась при наведении? Мы в HTML код сразу добавили две картинки, но одну скрыли с помощью :nth-of-type(2). Затем при наведении (hover) на родительский элемент, мы первую картинку скрываем (display: none), а вторую наоборот показываем, задавая ей display: block;
Эффекты при наведении на картинку CSS
Подборка Hover эффектов при наведении на картинку CSS. Здесь вы найдете эффекты для галереи, эффекты с появлением текста или иконок, рамки и многие другие интересные эффекты для сайта.
Красивое вращение картинки при наведении CSS
С помощью этого эффекта можно добиться красивого вращения картинки при наведении, для этого используем свойство transform. Такой эффект можно использовать для галереи, или для того, чтобы привлечь внимание к определенному элементу на сайте.
Этот эффект можно использовать не только для того чтобы повернуть изображение, при повороте можно вставить на обратную сторону текст или другую картинку, либо отразить по горизонтали исходное изображение, как на примере, что бы картинка разворачивалась.
С помощью этого эффекта можно поворачивать картинку при наведении, для этого используем свойство transform. Градусы поворота можно изменить по необходимости.
Пример
HTML
CSS
img.small-rotate < -webkit-transition: all 1s ease; transition: all 1s ease; >img.small-rotate:hover < -webkit-transform: rotate(15deg); /* Градусы поворота можно изменить по необходимости */ transform: rotate(15deg); /* Градусы поворота можно изменить по необходимости */ >
Вращение картинки при наведении CSS
С помощью этого эффекта можно вращать картинку при наведении, для этого используем свойство transform. Градусы поворота можно изменить по необходимости.
Пример
HTML
CSS
img.rotate-img < border-radius: 50%; -webkit-transition: -webkit-transform .8s ease-in-out; transition: transform .8s ease-in-out; >img.rotate-img:hover < -webkit-transform: rotate(360deg); /* Градусы поворота можно изменить по необходимости */ transform: rotate(360deg); /* Градусы поворота можно изменить по необходимости */ >
Рамка внутри блока или картинки при наведении
Чтобы рамка появлялась внутри блока или картинки можно использовать свойство outline-offset. С помощью него можно задать расстояние от края элемента до рамки. Отрицательное значение отображает рамку внутри элемента, положительное — вокруг элемента.
Пример
HTML
CSS
img:hover < outline: 2px dashed #3d1f15; /* Ширина, вид и цвет рамки */ outline-offset: -10px; /* Выводим рамку внутри элемента */ >
Рамка к изображению при наведении
Такая рамка может пригодиться в галерее, а так же если нужно выделить то или иное изображение при наведении. Рамка вокруг изображений делается с помощью свойства border, которое добавляется к селектору img. Чтобы рамка появлялась только при наведении курсора мыши на картинку, следует воспользоваться псевдоклассом :hover.
Пример
HTML
CSS
img:hover < border: 3px solid #413f3f; /* Ширина, вид и цвет рамки */ >
Эффект при наведении на картинку с текстом CSS
Эффекты при наведении на картинку с появлением и подчеркиванием заголовка. Для удобства копирования в каждую вкладку CSS добавлены общие стили. Эти эффекты можно использовать для галереи и для карточек товаров.
Пример
HTML
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Два эффекта при наведении на картинку с появлением текста. Для удобства копирования в каждую вкладку CSS добавлены общие стили. Эти эффекты можно использовать для галереи и для карточек товаров.
Пример
HTML
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Подскажите, как с помощью 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 пропишите смещение этого изображения равное высоте (или ширине) картинки. В результате получится элемент, который чуть-чуть изменяется при наведении указателя мыши.
