Как плавно изменить цвет ссылки?
Плавно изменить цвет ссылки при наведении на неё указателя мыши.
Решение
Цвет ссылки устанавливается через свойство color , которое добавляется к селектору A . Для изменения цвета ссылки при наведении на неё курсора мыши применяется псевдокласс :hover , а чтобы смена цвета происходила плавно, к селектору A следует добавить свойство transition , значением которого выступает время. Оно указывается обычно в секундах или миллисекундах.
Пример 1. Изменение цвета ссылок
Цвет ссылок Для сборки мегадроида требуется открыть коробку, достать мешочек с микросхемами и сложить их в нужном порядке, пользуясь нашим подробным 8631-страничным руководством.
В данном примере для наглядности выбраны контрастные цвета и задано время перехода одна секунда. На рабочем сайте время лучше установить меньше, 0.6s или около того. Так что подбирайте значение по своему вкусу и желанию.
HTML по теме
CSS по теме
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные рецепты
- Как добавить картинку на веб-страницу?
Как добавить иконку сайта в адресную строку браузера?
Как добавить фоновый рисунок на веб-страницу?
Как сделать обтекание картинки текстом?- Как растянуть фон на всю ширину окна?
- Как выровнять фотографию по центру веб-страницы?
Как разместить элементы списка горизонтально?
Как убрать подчеркивание у ссылок?
Как убрать маркеры в маркированном списке?
Как изменить расстояние между строками текста?
Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?- Как открыть ссылку в новом окне?
Как изменить цвет ссылки при наведении?
Для изменения цвета текстовой ссылки при наведении на неё курсора мыши применяется псевдокласс :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
- Состояния кнопок
- Сочетание с псевдоклассами
- Спрайты
- Типы ссылок
- Установка фона и градиента
- Фоновая картинка
При наведении курсора на ссылку меняется цвет фона блока
При наведении курсора на ссылку должен меняться цвет фона блока в котором находится ссылка. Подскажите пожалуйста как это сделать! Пробовал сделать при помощи hover в итоге получается только менять фон самой ссылки но не самого блока, так суть в том что цвет должен меняться только при наведении на кнопку, а не на блок в целом. HTML
Research
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum iti atque corrupti quos.
READ MORE .services_bloc < width: 370px; background-color: #fff; >.button3
Отслеживать
3 3 3 бронзовых знака
задан 2 мая 2019 в 19:53
Константин Константин
11 1 1 серебряный знак 2 2 бронзовых знака
Шутите? У вас в тегах ответ есть))000 Используйте hover , в чем конкретно проблема?
2 мая 2019 в 20:18
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Отличная нетривиальная задачка. Дело в том, что средствами css никак нельзя повлиять на родительский элемент из дочернего (зеленый фон), и сложно повлиять на соседние (белый цвет текста). У меня получилось решить её, но применить пришлось немного css-магии )) Здесь сочетание трёх идей:
- При ховере на кнопку (а не на ее родителя!) должны перекрашиваться ее соседи (и родитель, но это позже) — используем оператор влияния на соседние теги. Но он работает только на те, что ниже по коду, а текст у нас выше кнопки.
- Значит используем флекс на родителе и перевернем порядок — кнопка в коде идет первой, а отобразится последней, то что нужно!
- Повлиять на фон родительского блока из дочернего средствами css невозможно, но мы сделаем хитро — а не будем его менять вообще. Мы его перекроем. Пусть на ховер у кнопки возникает псевдоэлемент :after с нужным цветом фона, растянем его абсолютным позиционированием на всю карточку, положим под контент карточки z-index: -1 и уберем реакцию на ховер с него pointer-events: none;
- Готово )
.card < position: relative; width: 300px; margin: 20px auto; text-align: center; background-color: yellow; >.card__info < display: flex; position: relative; padding: 20px; flex-flow: column-reverse nowrap; z-index: 1; >.card__btn < display: block; width: 100px; margin: 20px auto 0; padding: 10px; border: 1px solid black; cursor: pointer; >.card__btn:hover < color: #fff; border-color: #fff; >.card__btn:hover ~ * < color: #fff; >.card__btn:hover:after
Hover me! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit expedita a voluptatum quibusdam veniam architecto in harum sunt ipsum dolore. Как изменить вид ссылки при наведении на нее курсора мыши?
Изменить цвет текстовой ссылки, когда на неё наводится курсор мыши и вернуть цвет обратно при уведении курсора.
Решение
Псевдокласс :hover , который добавляется к селектору A , определяет состояние ссылки при наведённом на неё курсоре мыши. В стилях вначале указывается селектор A , потом :hover (пример 1).
Пример 1. Изменение вида ссылки
HTML5 CSS 2.1 IE Cr Op Sa Fx
Цвет ссылок Cras ingens iterabimus aequor — завтра снова мы выйдем в огромное море.
В данном примере ссылка становится подчёркнутой и меняет свой цвет, когда на неё наводится указатель (рис. 1). Заметьте, что псевдокласс :hover в коде идёт после :visited . Это имеет значение, иначе посещённые ссылки в данном случае не будут изменять свой цвет.
Рис. 1. Вид ссылки при наведении на неё курсора мыши
Аналогично можно изменить и цвет фона под ссылкой при её наведении, добавив свойство background к селектору A:hover , как показано в примере 2.
Пример 2. Изменение цвета фона ссылки
HTML5 CSS 2.1 IE Cr Op Sa Fx
Фон под ссылками Audaces fortuna juvat - счастье покровительствует смелым.
Результат данного примера показан на рис. 2. Чтобы текст плотно не прилегал к фону, к селектору A добавлено свойство padding .
Рис. 2. Изменение цвета фона ссылки