Проверяет понимание каскада CSS и поведения браузера по умолчанию для псевдокласса :hover у ссылок.
Когда вы наводите курсор на ссылку, браузер применяет к ней псевдокласс :hover. Если разработчик не определил собственные стили для этого состояния, вступают в силу стили по умолчанию, которые заданы в user agent stylesheet — встроенной таблице стилей браузера.
text-decoration: none.pointer (рука с указательным пальцем).Важно понимать, что поведение по умолчанию различается между браузерами и операционными системами. Например, в Safari на macOS ссылки при наведении могут не менять цвет, а только показывать курсор. В Windows Chrome ссылка при наведении становится красной или оранжевой в зависимости от темы.
<style>
/* Собственные стили не заданы */
a {
color: blue;
text-decoration: underline;
}
</style>
<a href="#">Наведи на меня</a>
В этом примере при наведении браузер применит свои стандартные стили для :hover. Если вы хотите контролировать внешний вид, необходимо явно описать псевдокласс:
a:hover {
color: red;
text-decoration: none;
}
Также стоит помнить о каскаде и специфичности: если у ссылки есть класс с более высоким приоритетом, он может переопределить стили по умолчанию. Но без явного указания :hover браузер всё равно добавит свои стандартные эффекты, если они не сброшены через all: unset или аналогичные приёмы.
Итог: если не задавать собственные стили для :hover, ссылка будет вести себя так, как задумано производителем браузера — обычно это смена цвета и сохранение подчёркивания. Для полного контроля над дизайном всегда стоит явно определять состояния :hover, :focus и :active.
Frontend developer
Ментор по Frontend
Полное сопровождение до оффера — без дорогих курсов, с оплатой после трудоустройства
Записаться на консультацию