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

Для изменения цвета текстовой ссылки при наведении на неё курсора мыши применяется псевдокласс :hover, который добавляется к селектору A. Сперва через селектор A задаём цвет обычных ссылок, затем с помощью :hover задаём цвет ссылок при наведении (пример 1).

Пример 1. Изменение вида ссылки

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Цвет ссылок</title>
  <style>
   a {
    color: #0075B2; /* Цвет обычной ссылки */ 
    text-decoration: none; /* Убираем подчёркивание у ссылок */
   }
   a:visited {
    color: #8F8E8E; /* Цвет посещённой ссылки */
   } 
   a:hover {
    color: #CE242B; /* Цвет ссылки при наведении */ 
    text-decoration: underline; /* Добавляем подчёркивание */
   }
  </style>
 </head>
 <body>
  <p><a href="#">Cras ingens iterabimus aequor</a> —
   завтра снова мы выйдем в огромное море.</p>
 </body>
</html>

В данном примере ссылка становится подчёркнутой и меняет свой цвет, когда на неё наводится указатель (рис. 1). Заметьте, что псевдокласс :hover в коде идёт после :visited. Это имеет значение, иначе посещённые ссылки не будут менять свой цвет.

Вид ссылки при наведении

Рис. 1. Вид ссылки при наведении

Аналогично можно поменять и цвет фона под ссылкой при наведении на неё, добавив свойство background к селектору a:hover, как показано в примере 2.

Пример 2. Изменение цвета фона ссылки

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Фон под ссылками</title>
  <style>
   a {
    color: #000080; /* Цвет обычной ссылки */
    padding: 2px; /* Поля вокруг текста */
   }
   a:hover {
    text-decoration: none; /* Убираем подчёркивание */
    color: #FFFAC0; /* Цвет ссылки */ 
    background: #AB4A9C; /* Цвет фона */
   }
  </style>
 </head>
 <body>
  <p><a href="#">Audaces fortuna juvat</a> - 
   счастье покровительствует смелым.</p>
 </body>
</html>

Результат данного примера показан на рис. 2. Чтобы текст плотно не прилегал к фону, к селектору A добавлено свойство padding.

Изменение цвета фона ссылки

Рис. 2. Изменение цвета фона ссылки

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 28.09.2018
Редакторы: Влад Мержевич