Кратко
СкопированоХорошим паттерном в сайтостроении считается реакция элементов на действия пользователя. Например, если на элемент можно нажать, то при наведении курсора его стили должны немного меняться, как бы говоря пользователю «Нажми меня!»
Раньше интерактив можно было реализовать только при помощи JS, что сильно усложняло верстальщикам жизнь. Но сегодня у нас существует отличный помощник — псевдокласс :hover.
Пример
СкопированоСсылка в спокойном состоянии будет чёрного цвета и без подчёркивания, а при наведении курсора мыши сменит цвет на розовый, и у неё появится подчёркивание. Пользователь поймёт, что это интерактивный элемент, с которым можно взаимодействовать.
.link { color: #000; text-decoration: none;}.link:hover { color: pink; text-decoration: underline;}
.link {
color: #000;
text-decoration: none;
}
.link:hover {
color: pink;
text-decoration: underline;
}
Как пишется
СкопированоПосле любого селектора ставим двоеточие и пишем ключевое слово hover.
Селектор по тегу в состоянии :hover
Скопировано
a:hover { /* Стили */}
a:hover {
/* Стили */
}
Селектор по классу в состоянии :hover
Скопировано
.link:hover { /* Стили */}
.link:hover {
/* Стили */
}
Составной селектор в состоянии :hover
Скопировано
li .link:hover { /* Стили */}
li .link:hover {
/* Стили */
}
Селектор по id в состоянии :hover
Скопировано
#id:hover { /* Стили */}
#id:hover {
/* Стили */
}
Селектор по классу и его псевдоэлемент в состоянии :hover
Скопировано
.link::before:hover { /* Стили */}
.link::before:hover {
/* Стили */
}
Как понять
СкопированоБраузер подставляет любому элементу, на который наводится курсор, пометку в виде автоматически создаваемого класса. Мы можем стилизовать этот класс на своё усмотрение, при этом сама логика и механизм отслеживания наведения курсора будут скрыты под капотом движка браузера.
Подсказки
Скопировано💡 :hover можно очень круто анимировать, добавив в блок кода свойство transition 🎉
💡 На наведения курсора может реагировать абсолютно любой элемент, необязательно ссылка или кнопка.
💡 Если дизайнер не нарисовал в макете разные состояния, либо просите у него это сделать, либо пропишите стили на своё усмотрение. Но любой элемент, на который можно нажать, должен иметь как минимум стили для :hover.
На практике
Скопированосоветует
Скопировано💡 А что если на сайт зайти с планшета, к которому подключена bluetooth-мышь? Однозначно, ховер должен работать! А если дополнительных устройств ввода нет, то, конечно, стили по наведению должны быть сброшены, чтобы избежать визуального залипания при нажатии на соответствующие элементы.
Вот удобная практика для таких случаев, она ещё и позволяет писать чуточку меньше кода.
🛠 Чтобы не писать дополнительные обнуления ховер-стилей для тач-устройств, состояние :hover удобно задавать внутри медиавыражений с условием по типу взаимодействия с устройством.
Пример, исключающий тач-устройства, но не полностью:
.link { color: #ffffff; text-decoration-color: #2E9AFF; transition: background-color 0.5s linear;}/* Есть возможность навести указатель на элемент */@media (any-hover: hover) { .link:hover { background-color: #2E9AFF; transition: background-color 0.1s linear; }}
.link {
color: #ffffff;
text-decoration-color: #2E9AFF;
transition: background-color 0.5s linear;
}
/* Есть возможность навести указатель на элемент */
@media (any-hover: hover) {
.link:hover {
background-color: #2E9AFF;
transition: background-color 0.1s linear;
}
}
Таким образом, мы успешно задали стили по наведению на ссылку, которые не будут учтены на мобильных устройствах, но заработают, если имеется курсор.
По аналогии можно использовать и другое состояние — :active.
советует
Скопировано🛠 Пользователь может зайти на ваш сайт не только с десктопа, где есть мышка и её можно на что-то навести, но и с планшета или телефона, где мышкой выступает палец, а его нельзя на что-то навести, им можно только тапнуть.
Хорошая практика — сбрасывать :hover стили для тач-устройств. Иначе при нажатии на какой-то элемент ховер-стили будут залипать — телефон не знает, когда вы отводите палец в сторону.
🛠 Сайт смотрится аккуратнее и интереснее, если изменение стилей происходит с лёгкой анимацией, а не резко. Этот принцип взят из окружающего нас мира. Вспомните хоть одно событие, которое происходит резко, моментально, без промежуточных стадий. Не вспомните 😏
Я в своей работе стараюсь делать анимацию стилей для наведения по принципу «появляется быстро, пропадает медленно». Это позволяет пользователю быстро увидеть реакцию на свои действия и не дожидаться окончания анимации.
.link { color: #ffffff; text-decoration-color: #2E9AFF; /* Скорость исчезновения фонового цвета */ transition: background-color 0.5s linear;}.link:hover { background-color: #2E9AFF; /* Скорость изменения фонового цвета на голубой */ transition: background-color 0.1s linear;}
.link {
color: #ffffff;
text-decoration-color: #2E9AFF;
/* Скорость исчезновения фонового цвета */
transition: background-color 0.5s linear;
}
.link:hover {
background-color: #2E9AFF;
/* Скорость изменения фонового цвета на голубой */
transition: background-color 0.1s linear;
}
Ссылка быстро (за 0.1 секунды) меняет фоновый цвет на голубой при наведении курсора и чуть медленнее (за 0.5 секунды) приходит обратно в исходное состояние, когда курсор уводится за пределы ссылки.
🛠 Если вы задаёте стили для разных состояний ссылок, то следует придерживаться определённого порядка в объявлении стилей: :link — :visited — :focus — :hover — :active.
Этот порядок легко запомнить в виде аббревиатуры LVFHA и мнемоники LoVe Fears HAte.
