Html hover: Использование :hover | WebReference

Использование :hover | WebReference

На примере ссылок использование :hover выглядит следующим образом.

a { color: green; }
a:hover { color: red; }

Сперва мы определяем исходный стиль элемента, в частности, задаём цвет ссылок с помощью селектора A зелёным. Затем ниже пишем тот же селектор и через двоеточие без пробелов добавляем к нему :hover. После этого идут стилевые правила, которые должны проявляться при наведении курсора на элемент. В данном случае мы меняем цвет ссылки на красный.

:hover прекрасно сочетается не только с простыми селекторами элементов, но и с классами, а также работает в комбинациях селекторов, что позволяет на одной веб-странице делать группы ссылок разных видов. В примере 1 ссылки в <header> добавлены без традиционного подчёркивания через свойство text-decoration со значением none. При наведении на эти ссылки добавляется подчёркивание с помощью значения underline. В <footer> ссылки при наведении просто меняют свой цвет.

Пример 1. Использование :hover для ссылок

Рис. 1. Ссылки разных цветов

Надо учитывать, что в некоторых ситуациях :hover может не давать видимого результата, когда он неявно переопределяется. В приведённом стиле :hover не меняет цвет у посещённых ссылок, поскольку псевдокласс :visited располагается в коде ниже :hover.

a { color: green; }
a:hover { color: red; }
a:visited { color: purple; }

Обращайте внимание, что положение в коде влияет на конечный результат. Достаточно поставить :hover ниже :visited и цвет посещённых ссылок при наведении будет меняться на красный.

a { color: green; }
a:visited { color: purple; }
a:hover { color: red; }

См.

• :focus на мобильных устройствах
• <a>
• text-decoration-skip-ink
• Виды ссылок
• Всплывающая подсказка
• Наследование в CSS
• Нормальное позиционирование
• Переходы с помощью :hover
• Подсветка строк и колонок таблицы
• Псевдокласс :hover
• Псевдоклассы в CSS
• Работа с типографикой
• Селекторы CSS
• Сочетание с псевдоклассами
• Ссылки
• Ссылки
• Ссылки в HTML
• Якоря

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

Автор: Влад Мержевич

Последнее изменение: 11. 03.2020

Редакторы: Влад Мержевич

Псевдокласс :hover
Ctrl+←

Подсветка строк и колонок таблицы
Ctrl+→

html — Установить: наведение на основе класса

Задавать вопрос

спросил 12 лет, 10 месяцев назад

Изменено 1 год, 6 месяцев назад

Просмотрено 237 тысяч раз

У меня есть следующий HTML:

 

    главная страница
    бизнес
    обо мне

 

В CSS я хочу установить a:hover для этих пунктов меню на определенный цвет. Поэтому я пишу:

 .menu a:hover
{
    цвет:#ДДД;
}
 

Но я хочу установить этот цвет a:hover только для тех тегов с классом main-nav-item , а не main-nav-item-current , потому что он имеет другой цвет и не должен меняться при наведении. Все теги

 .menu a:hover .main-nav-item
{
    цвет:#ДДД;
}
 

 .menu a.main-nav-item:hover { }
 

 .menu > .main-nav-item:hover
    {
        цвет:#ДДД;
    }
 

 a.main-nav-item:hover { }
 

 .div
{
текстовое оформление: нет;
размер шрифта: 16;
дисплей:блок;
отступ: 14 пикселей;
}
.div а: наведите курсор
{
цвет фона:#080808;
белый цвет;
}
 

 .menu a:hover .main-nav-item
 

 .menu a .main-nav-item:hover
 

 .menu a.main-nav-item:hover
 

 a.main-nav-item: ссылка {
      цвет: синий !важно;
    }
    a.main-nav-item: посетил {
      цвет: красный !важно;
    }
    a.main-nav-item: hover {
      цвет: фиолетовый !важно;
    }
    a.main-nav-item: фокус {
      цвет: зеленый !важно;
    }
    a.main-nav-item:active {
      цвет: зеленый !важно;
    }
 

 . custom_list_item {
  черный цвет;
}

.custom_list_item:наведите {
  красный цвет;
} 

 
Test
 

 .custom_list_item {
    черный цвет;
}

.custom_list_item диапазон: наведение {
    красный цвет;
} 

 
Тест
 

 .custom_list_item {
  черный цвет;
}

.custom_list_item диапазон: наведите {
  красный цвет;
} 

 <дел>
  Тест