Ховер и клик должны совпадать

Это кажется очевидным, но ошибки на эту тему встречаются так часто, что надо бы написать.

Если у элемента интерфейса есть какой-то эффект при ховере (наведении мыши), этот элемент должен нажиматься. Если элемент нажимается, у него должен быть какой-то эффект при ховере. Зоны, в которых элемент нажимается и проявляет эффект при ховере должны совпадать с точностью до пикселя.

Вот некоторые ошибки, которые мне встречались:

  • Меню на сайте состоит из ссылок, завёрнутых в некоторый контейнер. У контейнера в стилях прописана подсветка при наведении. Вокруг текста ссылки остаются некоторые поля до краёв контейнера, где контейнер подсвечивается, но ссылка не работает.
  • Подчёркивание ссылки реализовано как-то так, что клик в саму линию подчёркивания не вызывает перехода по ссылке, хотя ховер есть. Бывает наоборот: ховера нет, а клик срабатывает.
  • Модальный попап закрывается кликом за его пределами. Ховеры элементов вокруг попапа продолжают работать, хотя клик по ним не вызовет связанное с ними действие, а только лишь закроет попап.
  • Функция элемента заблокирована скриптом, а ховер остаётся. Например: главная кнопка на форме отключена из-за ошибки в заполнении, но продолжает подсвечиваться при наведении, как будто работает.
  • Большой контейнер с картинкой и подписью нажимается целиком и реагирует на наведение каким-то эффектом. В углу контейнера есть маленькая иконка, которая делает что-то другое, например, добавляет объект в «Избранное». При наведении на иконку эффект наведения на контейнер сохраняется, хотя клик в этом месте не вызовет действия, связанного с контейнером целиком.

Эта мысль относится к теме «Обратная связь».

Подписаться на блог
Отправить
Дальше
4 комментария
Дмитрий 2019

Некоторые так и не могут запомнить, что ховер не всегда доступен, и приделывают функционал к нему. И это не только банальные менюшки, мне даже встречались формы, которые не отправляются пока не поховеришь кнопку отправки.

fsdfsdf 2019

Если у элемента интерфейса есть какой-то эффект при ховере (наведении мыши), этот элемент должен нажиматься.

Опровергается подсвечивающимися строчками в таблице. Ховер нужен, чтобы было явно видно, что за строка. Нажиматься она совсем не обязательно должна.

Михаил 2019

Опровергается подсвечивающимися строчками в таблице.

Да и многие элементы с title не обязаны нажиматься. Тут же прямо в оформлении комментариев пример — при наведении на метку времени (после имени комментатора) показываются полные дата-время, но ничего там не нажимается.

Igor 2019

Да и многие элементы с title не обязаны нажиматься.

Видимо имелся ввиду ховер, где указатель меняется на pointer. Или нет?

Мои книги