Как изменить цвет ссылки при наведении?
Для изменения цвета текстовой ссылки при наведении на неё курсора мыши применяется псевдокласс :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 для стилизации и JavaScript для обработки событий. Важно знать, что псевдокласс :hover не всегда корректно работает с элементом . Ниже приведён пример применения.
CSS:
Скопировать код
.highlight < background-color: lightblue; >/* Выберите любой цвет по своему вкусу */JavaScript:
Скопировать код
const mySelect = document.getElementById('mySelect'); mySelect.addEventListener('mouseover', function(e) < // Данный элемент нужно выделить с помощью класса "highlight". if(e.target.tagName === 'OPTION') e.target.classList.add('highlight'); >); mySelect.addEventListener('mouseout', function(e) < // Событие завершилось, следует удалить выделение. if(e.target.tagName === 'OPTION') e.target.classList.remove('highlight'); >);Этот код при наведении мыши добавляет опции класс .highlight , что меняет фон на светло-голубой цвет.
Преодоление ограничений стилизации
Оформление тегов и может доставить проблемы при проложении одних и тех же правил стилизации на разные браузеры. Многие из них доверяют отрисовку элементов системным компонентам, что может ограничивать поддержку псевдокласса :hover для .
В Firefox есть возможность стилизации через тени, но этот метод к сожалению не является универсальным.
В Chrome можно изменять только background-color для select:focus > option:checked . А при наведении курсора мыши всё становится несколько сложнее.
Создание пользовательского выпадающего списка для точной стилизации
Создание пользовательского выпадающего списка на базе ul/li позволяет надёжно воспроизводить эффекты наведения, паттерны взаимодействия и доступность стандартных списков. Тут без JavaScript для контроля событий и применения стилей не обойтись.
Визуализация
Посмотрите, как интерактивная �� палитра отражает реакцию каждого элемента выпадающего списка на взаимодействие:
Подмена цвета 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.1k 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,623 2 2 золотых знака 16 16 серебряных знаков 39 39 бронзовых знаков
- html
- css
- hover
- png
-
Важное на Мете
Связанные
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.4.29.8372
Как плавно изменить цвет ссылки?
Плавно изменить цвет ссылки при наведении на неё указателя мыши.
Решение
Цвет ссылки устанавливается через свойство color , которое добавляется к селектору A . Для изменения цвета ссылки при наведении на неё курсора мыши применяется псевдокласс :hover , а чтобы смена цвета происходила плавно, к селектору A следует добавить свойство transition , значением которого выступает время. Оно указывается обычно в секундах или миллисекундах.
Пример 1. Изменение цвета ссылок
Цвет ссылок Для сборки мегадроида требуется открыть коробку, достать мешочек с микросхемами и сложить их в нужном порядке, пользуясь нашим подробным 8631-страничным руководством.
В данном примере для наглядности выбраны контрастные цвета и задано время перехода одна секунда. На рабочем сайте время лучше установить меньше, 0.6s или около того. Так что подбирайте значение по своему вкусу и желанию.