При наведении на ссылку (тег <a>) она как правило изменяет свой вид (становится в фокусе). Чаще всего это простое изменение цвета или добавления подчеркивания. Также изменяется курсор на кисть руки. В этой статье мы рассмотрим подробнее как красиво реализовать изменение стиля ссылки при наведении курсора.
В таблице стилей у ссылки есть специальный псевдокласс :hover. Он отвечает за стиль при наведении. Как только курсор будет убран с ссылки, она вернется в исходное состояние.
Примеры с изменением вида ссылки при наведении
Пример 1. Как изменить цвет и сделать подчеркивание при наведении
<html> <head> <style> a.class_A1{ /* Стиль ссылки по умолчанию */ color: blue; text-decoration: none; } a.class_A1:hover{ /* Стиль ссылки при наведение */ color: red; /* Изменяем цвет на красный */ text-decoration: underline; /* Добавляем подчеркивание */ } </style> </head> <body> При наведении ссылка станет красной и подчеркнутой: <a class="class_A1" href="URL">ссылка</a> </body> </html>
Преобразуется на странице в следующее:
Пример 2. Как изменить фон ссылки при наведении
<html> <head> <style> a.class_A2{ color: blue; text-decoration: none; background: none; padding: 2px; } a.class_A2:hover{ color: white; background: blue; } </style> </head> <body> При наведении ссылка изменит фон на синий, а цвет ссылки станет белым: <a class="class_A2" href="URL">ссылка</a> </body> </html>
Преобразуется на странице в следующее:
Пример 3. Как поменять курсор при наведении на ссылку
По умолчанию у ссылок курсор при наведении имеет значение cursor:pointer. В следующем примере мы изменим его на другой.
<html> <head> <style> a.class_A3{ /* Стиль ссылки по умолчанию */ color: blue; text-decoration: none; cursor: default; /* Курсор по умолчанию */ } a.class_A3:hover{ /* Стиль ссылки при наведение */ color: red; /* Изменяем цвет на красный */ text-decoration: underline; /* Добавляем подчеркивание */ cursor: crosshair; /* Изменяем курсор */ } </style> </head> <body> При наведении ссылка станет красной и подчеркнутой, а курсор станет в виде плюса: <a class="class_A3" href="URL">ссылка</a> </body> </html>
Преобразуется на странице в следующее:
Пример 4. Сглаженное изменение стилей ссылки
С помощью свойства transition мы сгладим скорость изменения фона и цвета ссылки.
<html> <head> <style> a.class_A4{ color: blue; text-decoration: none; background: #B9D3EE; padding: 4px; font-weight: bold; border-radius: 4px; transition: background 1s ease, color 0.5s ease; /*Для браузера Google Chrome и Firefox:*/ -webkit-transition: background 1s ease, color 0.5s ease; -moz-transition: background 1s ease, color 0.5s ease; } a.class_A4:hover{ color: white; background: blue; } </style> </head> <body> При наведении ссылка изменит фон на синий, а цвет ссылки станет белым, при этом все это будет сглажено: <a class="class_A4" href="URL">ссылка</a> </body> </html>
Преобразуется на странице в следующее:
Пример 5. Красивое подчеркивание ссылки
<html> <head> <style> a.class_A5{ color: blue; text-decoration: none; } a.class_A5:hover{ color: red; border-bottom: 2px dashed #8A2BE2; /* С помощью этого свойства задаем стиль подчеркивания */ } </style> </head> <body> При наведении ссылка изменит цвет и появится необычное подчеркивание: <a class="class_A5" href="URL">ссылка</a> </body> </html>
Преобразуется на странице в следующее:
Читайте также:
• Как добавить кнопку "Наверх" на сайте
• Как сделать якорь ссылки
• Как сделать красивую подсказку для ссылок
• Как скрыть ссылку от поисковиков
• Как убрать подчеркивание ссылки
• Как сделать кнопку на сайте ссылкой