• Как заработать на сайте
  • Как заработать в интернете
  • Инвестиции в интернете
  • Партнерские программы
  • Рейтинг парт. программ
  • SEO продвижение
  • Вопросы и ответы
  • Термины оптимизатора
  • HTML-уроки
  • Интернет
  • Мои услуги
  • Реклама на сайте
  • Обратная связь
Стоимость баннера за месяц: 30$ (подробности)
Главная → HTML уроки и советы → Как изменить вид ссылки при наведении

Как изменить вид ссылки при наведении

При наведении на ссылку (тег <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>

Преобразуется на странице в следующее:

Ссылка из примера 4

Пример 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>

Преобразуется на странице в следующее:

При наведении ссылка изменит цвет и появится необычное подчеркивание: ссылка


Читайте также:
• Как добавить кнопку "Наверх" на сайте
• Как сделать якорь ссылки
• Как сделать красивую подсказку для ссылок
• Как скрыть ссылку от поисковиков
• Как убрать подчеркивание ссылки
• Как сделать кнопку на сайте ссылкой

← Перейти в каталог html уроков и советов

Основные разделы
  • Главная
  • Партнерские программы
  • Рейтинг партнерских программ
  • Статьи про SEO
  • Термины SEO
  • Описание бирж
  • HTML-уроки и советы
  • CSS-уроки
  • Биткоины
  • PHP-уроки
  • Бинарные опционы
  • Социальные сети
  • Обзоры систем
  • Все про CMS
  • Реклама в интернете
Важно
  • Продвижение сайта
  • Аудит внутренней оптимизации
  • Куплю Ваш сайт
  • Куплю Вашу подпись на форуме
  • Подписаться на рассылку
  • Реклама на сайте
  • Карта сайта
  • Обратная связь
© 2010-2022 - Zarabotat-Na-Sajte.ru