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

Как поменять цвет при наведении на ссылку css

  • автор:

Как сделать, чтобы цвет рамки вокруг изображения-ссылки менялся при наведении на него курсора мыши?

За изменение стиля элемента при наведении на него указателя мыши отвечает псевдокласс hover. Для управления стилем ссылок этот псевдокласс добавляется к селектору A через двоеточие.

Также псевдокласс hover допускается применять аналогичным способом к изображениям, но в браузере Internet Explorer версии 6 и ниже этот подход работать не будет. Все потому, что эта версия Internet Explorer понимает hover только для ссылок. Поэтому рассмотрим только универсальный метод, работающий во всех браузерах.

Изображение превращается в ссылку, если тег поместить внутрь контейнера , при этом вокруг картинок автоматически добавляется рамка, показывающая что перед нами ссылка. Вид таких рамок управляется с помощью стилевого атрибута border добавляемого к конструкции A IMG, которая сообщает, что стили следует применять к тегу расположенному внутри . Параметры рамки при наведении на рисунок курсора задаются конструкцией A:hover IMG, как показано в примере 1. Пример 1. Изменение цвета рамки HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0    Цвет рамки     

Как убрать фиолетовый цвет ссылок в css

Цвет ссылок, по умолчанию, меняется в одном из трёх случаев:

  • Ссылка, по которой пользователь уже перешёл. За это состояние отвечает псевдокласс :visited
  • Ссылка при наведении курсора мыши. Изменить стили можно с помощью псевдокласса :hover
  • Ссылка при клике, но до момента, как произошёл переход. Определить стили у такой ссылки можно у псевдоэлемента :active
 href="https://ru.hexlet.io">На сайт Хекслета 
a:hover  /* Цвет при наведении */ color: red; > a:visited  /* Цвет посещённой ссылки */ color: green; > a:active  /* Цвет ссылки при клике */ color: blue; > 

3 эффекта при наведении на ссылку

Плавную смену цвета можно сделать через transition , в которой содержатся свойства, которые надо анимировать при их изменении.

a < color: blue; text-decoration: none; /* задать анимацию для свойства color */ transition: color 0.4s; > a:hover < color: red; >

2. Плавное появление подчёркивания

Код ниже в конце каждой ссылки добавляет элементы через псевдоэлемент ::after с нулевой шириной. При наведении на ссылку, ширина элемента увеличивается на ширину текущей ссылки.

a < display: inline-block; > a::after < background-color: navy; content: ""; display: block; height: 1px; width: 0; /* задать анимацию для свойства width */ transition: width 0.5s ease; > /* Анимация при наведении на ссылку */ a:hover::after < width: 100%; >

3. Плавное появление подчёркивания (второй вариант)

Код ниже в конце каждой ссылки добавляет прозрачные элементы через псевдоэлемент ::after . При наведении на ссылку, элемент плавно появляется и немного спускается вниз.

a < position: relative; > a::after < content: ""; background: blue; width: 100%; position: absolute; height: 2px; top: 28px; left: 0; opacity: 0; transition: opacity .2s, top .2s; > a:hover::after < top: 34px; opacity: 1; >

Обновлено: 01 ноября 2020

Комментарии

Авторизуйтесь, чтобы добавлять комментарии

Красивые ссылки в Тильде, часть 2

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

1. Задаем цвет текста ссылки

Например, #2599e6. Для этого создадим блок Т193 «Модификатор: стиль ссылок» из раздела блоков «Другое», зайдем в настройки блока и вставим нужный цвет в поле «Цвет текста».

Чтобы блок работал для всего сайта, создайте его на специальной странице «Шапка сайта».

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

Например, #b5e1ff. В том же блоке ставим нужный цвет в поле «Цвет линии».

В идеальном мире линия того же цвета, что и ссылка, но полупрозрачная. В Тильде прозрачность линии не поменять, но эффект можно имитировать более светлым тоном и минимальной толщиной (1px в поле «Размер линии»).

3. Задаем цвет текста при наведении

Например, #ba0095. Заходим в «Настройки сайта», переходим в нижний раздел «Еще», нажимаем «Редактировать CSS». Вставляем код и сохраняем:

a, a:visited < -webkit-transition: 0.5s ease; transition: 0.5s ease; >a:hover, a:visited:hover

Переменные webkit-transition и transition обеспечат красивое затухание цвета при проносе курсора. Если не нужно, удалите эти строки.

Результат с цветами из примеров смотрите на моем сайте:

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

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