Псевдокласс hover задает стили для ссылки, на которую мы навели мышкой. Обычно этот псевдокласс применяется совместно с псевдоклассами link, visited и active.
Порядок их перечисления в CSS при имеет значение: link, visited, hover, active (если его нарушить - будут проблемы!). Мнемоническое правило для запоминания порядка: LoVe HAte.
Совет: состояние hover можно задавать не только ссылкам, но и любым другим элементам (не работало в старых IE).
Совет: часто состояния link и visited объединяют вместе: a:link, a:visited{color: red}.
Совет: для добавления или отмены подчеркивания ссылок следует использовать свойство text-decoration.
Синтаксис
a:hover {
}
Примеры
Пример
Непосещенная ссылка будет красного цвета, посещенная - голубого. Если вы наведете на нее мышкой - она станет зеленого цвета, а если нажмете левую кнопку мыши и будете ее удерживать - станет черной (состояние active):
a:link {
color: red;
}
a:visited {
color: blue;
}
a:hover {
color: green;
}
a:active {
color: black;
}
Результат выполнения кода: