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

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

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.