Хамелеон, на которого наведён курсор мыши
Иллюстрация: Кира Кустова

:hover

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

Хорошим паттерном в сайтостроении считается реакция элементов на действия пользователя. Например, если на элемент можно нажать, то при наведении курсора его стили должны немного меняться, как бы говоря пользователю «Нажми меня!»

Раньше интерактив можно было реализовать только при помощи 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

Секция статьи "Селектор по тегу в состоянии :hover"
        
          
          a:hover {  /* Стили */}
          a:hover {
  /* Стили */
}

        
        
          
        
      

Селектор по классу в состоянии :hover

Секция статьи "Селектор по классу в состоянии :hover"
        
          
          .link:hover {  /* Стили */}
          .link:hover {
  /* Стили */
}

        
        
          
        
      

Составной селектор в состоянии :hover

Секция статьи "Составной селектор в состоянии :hover"
        
          
          li .link:hover {  /* Стили */}
          li .link:hover {
  /* Стили */
}

        
        
          
        
      

Селектор по id в состоянии :hover

Секция статьи "Селектор по id в состоянии :hover"
        
          
          #id:hover {  /* Стили */}
          #id:hover {
  /* Стили */
}

        
        
          
        
      

Селектор по классу и его псевдоэлемент в состоянии :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:hover:active.

Этот порядок легко запомнить в виде аббревиатуры LVHA.