Когда у нас в eLama компонентов в библиотеке стало достаточно много, мы заметили, что ховеры не имеют системы: меняется цвет заливки, цвет рамки, цвет текста, появляется тень и т.д.
Мы делали это не со зла, в отдельных проектах так работало лучше, но глядя на интерфейс в целом, стало понятно, что это проблема.
![Даже у схожих компонентов ховеры были разные Даже у схожих компонентов ховеры были разные](https://habrastorage.org/getpro/habr/upload_files/3f3/bc7/2ff/3f3bc72ff70dc93ad885196473de60e1.png)
Не всё бывает тем, чем кажется
При разработке интерфейсов мы опираемся на принцип — то, что ты делаешь должно работать так, как того будет ожидать пользователь. Если пользователь видит перед собой кнопку, то он будет ожидать от нее поведение кнопки, а значит она должна и вести себя ожидаемо.
Например, у нас в библиотеке есть ссылка и кнопка, визуально похожая на ссылку. Из-за того, что в их поведении при ховере не было сильного различия, мог возникать вопрос, что произойдет при нажатии — перекинет на другую страницу, или действие будет на текущей странице. Поначалу даже были случаи, когда разработчики использовали кнопку, как ссылку, руководствуясь тем, что она выглядит и ведет себя при ховере похоже на ссылку.
![Оказалось, не для всех может быть очевидно, что это два разных компонента Оказалось, не для всех может быть очевидно, что это два разных компонента](https://habrastorage.org/getpro/habr/upload_files/0ac/914/8bb/0ac9148bb17d83bb05df2df66462f73e.gif)
Какие ховеры вообще бывают
1. Изменение фона (появление подложки или изменение ее цвета)
![Так это выглядит в Notion Так это выглядит в Notion](https://habrastorage.org/getpro/habr/upload_files/4d7/0bb/fef/4d70bbfefd7c668356312919be2a7362.png)
2. Изменение бордера (появление или смена цвета)
![Так себя ведет кнопка фильтров в Jira Так себя ведет кнопка фильтров в Jira](https://habrastorage.org/getpro/habr/upload_files/1a4/1b1/7da/1a41b17da9a188308ad2d09525aa188a.png)
3. Изменение цвета иконки или текста
![Пример с Хабра Пример с Хабра](https://habrastorage.org/getpro/habr/upload_files/315/57c/f2d/31557cf2df84c683460e8764a211d99e.png)
4. Изменение местоположения
![Можно увидеть на главной странице Яндекса Можно увидеть на главной странице Яндекса](https://habrastorage.org/getpro/habr/upload_files/c05/570/08d/c0557008dfdfd8741faa442778d72fac.png)
5. Добавление эффектов (тени, градиенты и т.д.)
![Кнопка из Google календаря Кнопка из Google календаря](https://habrastorage.org/getpro/habr/upload_files/67e/23a/510/67e23a5100bcff0d1d65d7ff7c17317e.png)
6. Сложные ховеры (изменение размера, формы и т.д.)
![Необычная кнопка с сайта nyc.awwwards.com Необычная кнопка с сайта nyc.awwwards.com](https://habrastorage.org/getpro/habr/upload_files/79a/755/5ee/79a7555eee5d927eaf132ec3566b476d.png)
На самом деле, типов ховеров может быть и больше, здесь перечислены, наверно, самые основные, и я думаю в комментариях вы сможете упомянуть еще какие-то.
Наводим порядок
Button, SelectList, Table, Chip, Lable, Switch, Pagination, навигация в левом меню
Какой тип решили использовать: Изменение фона
Кнопки в этой группе оказались самыми проблемными — у них оказалось сразу 3 типа ховера.
![](https://habrastorage.org/getpro/habr/upload_files/4c1/314/8d4/4c13148d44ef7a7976556df231c28b93.gif)
Мы решили сделать появление подложки единого цвета у кнопок, которые изначально не имеют никакого фона. Кнопки визуально похожие на ссылки получают важное отличие от ссылок при ховере.
![](https://habrastorage.org/getpro/habr/upload_files/9ce/6ed/531/9ce6ed5314276b7d7b07a2275eeae044.gif)
Смену цвета у иконки мы оставили для активного состояния кнопки (например: tooltip или кнопка фильтров) и для того случая, когда зона наведения больше стандартного размера кнопки (например, у нас это кнопка закрытия toast)
![Пример активной кнопки Пример активной кнопки](https://habrastorage.org/getpro/habr/upload_files/459/05d/7d1/45905d7d1ccf8e39998322a150c21d42.gif)
Rating
Какой тип решили использовать: Изменение фона и изменение цвета иконки
В этом случае мы не стали менять тот ховер, какой был. Кнопка рейтинга похожа на обычной кнопку-иконку, у нее так же есть активное состояние, но эмоциональное значение у нее больше. Поэтому, чтобы усилить его, мы используем сразу два типа ховера.
![](https://habrastorage.org/getpro/habr/upload_files/70a/4f8/7bd/70a4f87bd9cef47a9c4dc0cce05bdf3e.png)
RadioLine, CheckLine и Tab
Какой тип решили использовать: Изменение цвета текста
Приводим ховер в RadioLine, CheckLine к виду текущего ховера у табов — изменяем только цвет текста при наведении.
![](https://habrastorage.org/getpro/habr/upload_files/41a/566/4cc/41a5664ccd6bf4d60bfb028eae96dc9b.gif)
Убиваем двух зайцев разом: избавляемся от типа ховера с появлением обводки и улучшаем анимацию у RadioLine — в варианте с обводкой при перемещении синей подложки иногда заметно исчезающую обводку, что выглядит некрасиво.
![Косяк в анимации в слоууууумо Косяк в анимации в слоууууумо](https://habrastorage.org/getpro/habr/upload_files/2b2/af3/1ca/2b2af31ca239cbd581d33ba6709af560.gif)
Checkbox
Какой тип решили использовать: Изменение фона и бордера
Тут все просто: у компонента есть два состояния — выбранный и не выбранный — и соответственно два типа ховера — меняется фон и меняется бордер.
![](https://habrastorage.org/getpro/habr/upload_files/c8e/baa/46c/c8ebaa46cc6a8e512c84caef1626afc4.gif)
Input, MultiInput, TextArea, Select, Radiobutton
Какой тип решили использовать: Изменение бордера
![](https://habrastorage.org/getpro/habr/upload_files/82e/342/4d7/82e3424d7f6d1de51f6ad4b0f4d086c3.gif)
Ховер на сложные элементы
У сложных элементов вроде карточки задачи на канбан-доске мы решили делать анимацию добавления эффекта при ховере — появление тени. Мы выбирали между тенью и появлением обводки, но обводку отмели, потому что обводка может частично теряться в элементе, в котором есть темные части по краям.
![](https://habrastorage.org/getpro/habr/upload_files/540/ce7/6bc/540ce76bc4e802cbe06b31d49c7fd09a.png)
Но есть исключения
InputFile
У этого компонента есть два типа ховера — обычное наведение мышкой и перетаскивание файлов. Появление подложки при перетаскивании файлов это привычное поведение для такой кнопки, поэтому для обычного ховера оставляем смену цвета у иконки, чтобы эти два типа оставались разграниченными между собой.
![](https://habrastorage.org/getpro/habr/upload_files/641/a2e/49b/641a2e49bb3d3520d7c75aefe8a1a234.png)
Link Button
Не добавляем появление подложки, чтобы оставить визуальное отличие от кнопки при наведении.
![](https://habrastorage.org/getpro/habr/upload_files/34a/d4c/f5d/34ad4cf5d463a1e3fa6dc77624d6fc69.gif)
Про анимацию ховеров
Практически у всех наших компонентов у ховера есть плавная анимация, но она нужна не всегда.
Без такой анимации можно обойтись в боковом меню, выпадающем списке и таблице. В том, что имеет структуру строк. Плавная анимация в таких случаях может выглядеть очень тягучей, если сделать ее слишком медленной, потому что она будет не поспевать за курсором. А если сделать ее слишком быстрой, то будет излишнее мерцание.
Но может быть и частичная анимация, например, так мы сделали у пагинации — при наведении на номер страницы подложка появляется плавно, но когда курсор уходит с нее, подложка исчезает мгновенно. Это было сделано, чтобы избежать ситуации, когда проводишь курсор по цифрам быстро и одновременно видны несколько подложек, потому что новые появляются, когда предыдущие еще не успели исчезнуть.