ховер на сайте что это
Hover-эффект
Hover-эффект – это технология веб-анимации, благодаря которой элементы сайта изменяют свой вид при наведении на них курсора или клике по ним.
Ховеры включают в себя множество разнообразных эффектов: изменение цвета, всплывающие подсказки и иные подписи, увеличение/смещение/трансформация/ротация объектов, плавные переходы и т.д.
Hover-эффекты способны сделать интерфейс сайта гораздо более ярким, оригинальным и привлекающим внимание посетителей. Очень часто ховерами оснащают кнопки ссылок, после чего они изменяют/инвертируют цвет, становятся прозрачными или увеличиваются в размерах при наведении курсора.
Hover-эффекты добавляют веб-дизайну интерактивности, но также могут сделать его более функциональным и удобным для пользователей. Нередко при помощи ховеров оформляют галереи изображений (для каталога товаров, портфолио и т.д.) или другого контента. По умолчанию все объекты в галерее представлены в виде миниатюр, которые увеличиваются до полноразмерного формата, если навести на них курсор мыши.
Hover-эффекты можно создавать как вручную (используя возможности языков HTML/CSS), так и при помощи встроенных инструментов популярных конструкторах сайтов: Wix, Tilda и других.
Настроить интеграцию без программистов ApiX-Drive
Статьи о маркетинге, автоматизации и интеграциях в нашем Блоге
Что такое hover эффект? — TemplateMonster
Hover определяет стиль элемента при наведении на него курсора мыши.
Что такое hover?
Ховер помогает сделать дизайн сайта более интересным и побуждающим пользователя получить дополнительную информацию о теме ссылки.
Например, при наведении курсора мыши на одну из ссылок на странице, она может изменить цвет, указывая, что на нее можно нажать. Обычно такие ссылки добавляются на страницы или в тексты, чтоб переходя по ним, пользователь узнавал более точную информацию или переходил на страницу определенного товара для осуществления покупки.
На скрине выше показан пример изменения цвета при наведении курсора на определенную новость.
Примечание: Для смартфонов и планшетов, использующих палец вместо компьютерной мышки, невозможно навести курсор на объект без стороннего программного обеспечения.
Синтаксис
Пример
Basic example
Результат:
Ховер и галерея
Итак, что такое ховер понятно, но его можно использовать не только для подсветки текстовых ссылок.
Вы можете использовать :hover для создания галереи изображений с полноразмерными изображениями, которые отображаются только тогда, когда мышь наводится на миниатюру.
Все эти приемы помогают сделать сайт более современным и интересным, а пост не перенасыщать информацией, добавляя ссылки, по которым пользователь сможет получить дополнительную информацию. А ховер помогает сфокусировать внимание читателей на этих ссылках.
Ховеры бывают разные
Когда у нас в eLama компонентов в библиотеке стало достаточно много, мы заметили, что ховеры не имеют системы: меняется цвет заливки, цвет рамки, цвет текста, появляется тень и т.д.
Мы делали это не со зла, в отдельных проектах так работало лучше, но глядя на интерфейс в целом, стало понятно, что это проблема.
Даже у схожих компонентов ховеры были разные
Не всё бывает тем, чем кажется
При разработке интерфейсов мы опираемся на принцип — то, что ты делаешь должно работать так, как того будет ожидать пользователь. Если пользователь видит перед собой кнопку, то он будет ожидать от нее поведение кнопки, а значит она должна и вести себя ожидаемо.
Например, у нас в библиотеке есть ссылка и кнопка, визуально похожая на ссылку. Из-за того, что в их поведении при ховере не было сильного различия, мог возникать вопрос, что произойдет при нажатии — перекинет на другую страницу, или действие будет на текущей странице. Поначалу даже были случаи, когда разработчики использовали кнопку, как ссылку, руководствуясь тем, что она выглядит и ведет себя при ховере похоже на ссылку.
Оказалось, не для всех может быть очевидно, что это два разных компонента
Какие ховеры вообще бывают
1. Изменение фона (появление подложки или изменение ее цвета)
Так это выглядит в Notion
2. Изменение бордера (появление или смена цвета)
Так себя ведет кнопка фильтров в Jira
3. Изменение цвета иконки или текста
Пример с Хабра
4. Изменение местоположения
Можно увидеть на главной странице Яндекса
5. Добавление эффектов (тени, градиенты и т.д.)
Кнопка из Google календаря
6. Сложные ховеры (изменение размера, формы и т.д.)
Необычная кнопка с сайта nyc.awwwards.com
На самом деле, типов ховеров может быть и больше, здесь перечислены, наверно, самые основные, и я думаю в комментариях вы сможете упомянуть еще какие-то.
Наводим порядок
Button, SelectList, Table, Chip, Lable, Switch, Pagination, навигация в левом меню
Какой тип решили использовать: Изменение фона
Кнопки в этой группе оказались самыми проблемными — у них оказалось сразу 3 типа ховера.
Мы решили сделать появление подложки единого цвета у кнопок, которые изначально не имеют никакого фона. Кнопки визуально похожие на ссылки получают важное отличие от ссылок при ховере.
Смену цвета у иконки мы оставили для активного состояния кнопки (например: tooltip или кнопка фильтров) и для того случая, когда зона наведения больше стандартного размера кнопки (например, у нас это кнопка закрытия toast)
Пример активной кнопки
Rating
Какой тип решили использовать: Изменение фона и изменение цвета иконки
В этом случае мы не стали менять тот ховер, какой был. Кнопка рейтинга похожа на обычной кнопку-иконку, у нее так же есть активное состояние, но эмоциональное значение у нее больше. Поэтому, чтобы усилить его, мы используем сразу два типа ховера.
RadioLine, CheckLine и Tab
Какой тип решили использовать: Изменение цвета текста
Приводим ховер в RadioLine, CheckLine к виду текущего ховера у табов — изменяем только цвет текста при наведении.
Убиваем двух зайцев разом: избавляемся от типа ховера с появлением обводки и улучшаем анимацию у RadioLine — в варианте с обводкой при перемещении синей подложки иногда заметно исчезающую обводку, что выглядит некрасиво.
Косяк в анимации в слоууууумо
Checkbox
Какой тип решили использовать: Изменение фона и бордера
Тут все просто: у компонента есть два состояния — выбранный и не выбранный — и соответственно два типа ховера — меняется фон и меняется бордер.
Input, MultiInput, TextArea, Select, Radiobutton
Какой тип решили использовать: Изменение бордера
Ховер на сложные элементы
У сложных элементов вроде карточки задачи на канбан-доске мы решили делать анимацию добавления эффекта при ховере — появление тени. Мы выбирали между тенью и появлением обводки, но обводку отмели, потому что обводка может частично теряться в элементе, в котором есть темные части по краям.
Но есть исключения
InputFile
У этого компонента есть два типа ховера — обычное наведение мышкой и перетаскивание файлов. Появление подложки при перетаскивании файлов это привычное поведение для такой кнопки, поэтому для обычного ховера оставляем смену цвета у иконки, чтобы эти два типа оставались разграниченными между собой.
Link Button
Не добавляем появление подложки, чтобы оставить визуальное отличие от кнопки при наведении.
Про анимацию ховеров
Практически у всех наших компонентов у ховера есть плавная анимация, но она нужна не всегда.
Без такой анимации можно обойтись в боковом меню, выпадающем списке и таблице. В том, что имеет структуру строк. Плавная анимация в таких случаях может выглядеть очень тягучей, если сделать ее слишком медленной, потому что она будет не поспевать за курсором. А если сделать ее слишком быстрой, то будет излишнее мерцание.
Но может быть и частичная анимация, например, так мы сделали у пагинации — при наведении на номер страницы подложка появляется плавно, но когда курсор уходит с нее, подложка исчезает мгновенно. Это было сделано, чтобы избежать ситуации, когда проводишь курсор по цифрам быстро и одновременно видны несколько подложек, потому что новые появляются, когда предыдущие еще не успели исчезнуть.
Интересные ховеры
Тренды приходят и уходят, но есть некоторые вещи, которые будут всегда присутствовать в веб-дизайне, только меняя свою обложку.
Это касается и такой вещи, как ховеры. Они подразумевают под собой изменение вида элемента при наведении на него курсора мышки.
Для чего применяются нестандартные, интересные ховеры на современных веб-сайтах? Для того, чтобы заставить пользователя кликать и проходить по страницам, повысить количество внутренних переходов и конверсию сайта. А уже потом – чтобы сделать ресурс неповторимым, оригинальным, запоминающимся.
И, следует сказать, у этого тренда все замечательно получается, и с задачей своей он справляется на ура.
В сегодняшней статье мы посмотрим, что же такого интересного придумали наши заграничные коллеги и прогуляемся по новым и популярным сайтам как с необычными, так и с уже привычными ховерами.
Первый на очереди вот этот сайт одного французского иллюстратора и арт-директора. Ресурс, согласитесь, очень интересный, и собрал в себе реализацию многих нынешних трендов – тут тебе и большое фото на бэкграунде, и рукописные шрифты, и ссылки перечеркнутые. А при наведении на меню курсора, линия, которая перечеркивает нолик, «отъезжает» в сторону. Очень интересный ход, не правда ли?
Этот известный ресурс для дизайнеров обязан быть в тренде – что, собственно, мы и видим. С ховерами тут тоже все в порядке.
Первое, что бросается в глаза – это появление фона у заголовков при наведении курсора. Второе – это интересное оформление ссылок. В нормальном состоянии они красные и подчеркнуты черным. При наведении мышки цвета меняются местами – ссылка становится черной, подчеркивание – красным.
А с этого сайта вообще долго уходить не хочется. При наведении курсора на одну из частей экрана меняется вид кнопки и появляются другие визуальные эффекты. Необычно и очень интересно!
Еще один оригинальный ресурс. Как видим, он даже отмечен ресурсом Awwwards как «Сайт дня». На ваши движения мышкой он реагирует плавным танцем фона и надписи. Можете нажать, где угодно – фон сразу изменится на белый, и появится скромненькое, минималистическое серое меню. Но при наведении курсора на один из пунктов буквы сразу начинают играть красками.
Здесь подумали не только об анимированном ховере. Тут пользователь может «играть» элементами, не только наводя курсор на изображения; на ресурсе очень интересно сделан скроллинг. Убедитесь сами.
Тут мы можем видеть уже несколько традиционное решение – картинка и надпись над ней при наведении курсора становятся светлее. При этом с изображения словно снимается «шторка».
На этом сайте мышкой можно много чего наделать: и иконки переворачивать, и картинки поднимать-увеличивать. Но при нажатии на активные элементы, к сожалению, ничего не происходит – то есть, все сделано именно для игры, для того, чтобы задержать пользователя на сайте подольше.
Очень интересный ресурс, где реализованы не только рукописные шрифты, но и иконки словно начертаны чернилами в тетради, а потом вырезаны и приклеены. Еще один из новых трендов, но это – тема отдельной статьи. Мы же говорим о ховерах. Тут при наведении на иконки, служащие пунктами меню, фон элемента слегка светлеет, и рисунок поднимается вверх.
А здесь увеличивается, точнее, приближается фото при наведении мышки. При этом изображение служит ссылкой – при нажатии мы попадаем в Instagram компании.
Еще один ресурс, отмеченный премией Awwwards. Тут на плиточное меню наложены интересные ховер-эффекты: изображение затемняется, появляется название и описание раздела.
Что-то похожее можно наблюдать и на Dribbble – только тут изображение практически пропадает, на смену ему приходит описание и название статьи.
И напоследок хотелось бы показать работу наших мастеров.
Тоже интересное трендовое решение – при наведении курсора появляется имя, место работы, ссылки на соцсети, увеличивается фото; на остальные фотографии словно наложен инфракрасный фильтр.
Чтобы стать лучшими, нужно учиться у лучших. Чтобы получить полезный опыт, нужно перенимать его у тех, кого ставят в пример.
Надеемся, подборка будет полезной для вас, и вы сможете почерпнуть идеи для новых свершений. Может, что-то даже ляжет в основу вашего нового проекта?
А вот здесь вы можете посмотреть и научиться делать интересные анимированные ховеры.
Состояние hover: как должна вести себя ссылка при наведении
Данное рассуждение явилось разросшимся комментом на публикацию dezmasterdezmaster, опубликовавшему сегодня статью под заголовком «Ссылки при наведении курсора: нужна ли реакция?». Честно говоря, меня давно мучают схожие вопросы (= И вот, наконец, удалось немного понаводить порядок в своей голове.
Основной смысл всего мною сказанного: сила реакции ссылки на курсор мыши уменьшает время прицеливания (точно также как и размер ссылки, и ее расстояние от курсора), а значит уменьшает время между нашим желанием и его реализацией. Однако, вместе с тем, слишком сильная реакция может угнетает наши органы чувств и вызывать раздражение.
В итоге, контекст, в который помещена ссылка, определяет ту степень контрастности состояний ссылки, которую нам следует применять. Выделяются следующие контексты: ссылка среди картинок, в тексте, среди ссылок, в меню, в повторе, в публиковании.
Издержки прицеливания
Наведение курсора на ссылку — это очевидные издержки труда, лежащие между нашим желанием и его реализацией. Чем раньше мы понимаем, что мышь нацелена, и ссылка готова к клику, тем меньше энергии мы тратим на само прицеливание, и тем полнее наше переживание удовлетворения.
В работу по прицеливанию входит не просто перемещение курсора по плоскости, но и усилие, затрачиваемое на осознание того, что все сделано, как надо. Это можно почувствовать, попробовав сначала попасть издалека в какую-нибудь большую ссылку, например логотип сайта, а потом — с меньшего расстояния — в обычную сслыку в тексте.
Время, истраченное на осознание того факта, что мы все сделали верно, может оказаться куда более значительным, чем время по физическому перемещению курсора мыши. На время это оказывает влияние не только размер ссылки, ее расстояние от курсора мыши и отличие от остального контента — но и, не в последнюю очередь, динамическая реакция ссылки при наведении.
Чем отчетливее ссылка, и чем она ярче среагирует на наведение, тем быстрее мы сообразим, что нацеливание завершено и работа закончена.
Помимо чисто технического прицеливания пользователь вынужден сталкиваться и с другими проблемами. Ведь любой клик — это принятие определенного решения. Для принятия решения нужно понимать, какие элементы страницы за что ответственны и снизить риск неправильного их использования до минимума. А любая неуверенность в точности понимания смысла — опять же, расходует дополнительное время.
В таких случаях дополнительная подсветка ссылок может помочь снизить пользовательские риски. Чем контрастнее состояние ссылки при наведении, тем более подчеркивается важность и серьезность последствий, которые последуют вслед за кликом. И наоборот.
Контраст и контекст
Однако, у большой контрастности есть и обратная сторона: если ссылка будет меняться слишком сильно, она может в результате быстрее истощить наши органы чувств и вызвать законное раздражение. Особенно если учесть, что порой мы касаемся ссылок случайно, следуя курсором к какой-то совсем другой цели.
Значит универсального решения быть не может, нужно искать золотую середину: сделать реакцию ссылки довольно отчетливой, но в то же самое время не переборщить. Говоря по-другому, мы должны правильно подобрать конраст между активным и неактивным состоянием ссылки. Конраст же этот сильно завязан на окружающем ссылку контексте.
По умолчанию, при наведении на ссылку, курсор мыши приобретает форму указательного пальца. Это реакция, сама по себе создающая уже какой-то конраст. Вопрос в том, насколько он достаточен?
Ссылка среди картинок
Так, если ссылка находится не в тексте, а среди объектов, реагирующих на скольжение мыши дефолтным курсором-стрелкой (картинки, заголовки с большими отступами), то видимо простое изменение курсора на указательный палец будет недостаточным.
Указательный палец не сильно отличается от дефолтной стрелки: примерно одинаковые размеры, черный пиксельный контур, белая заливка. При быстром перемещении курсора можно и не заметить трансформации одного в другое: особенно учитывая, что мы не следим глазами за курсором, а фокусируем взгляд на том, что лежит под ним.
Если нам приходится переводить фокус с контента на курсор — чтобы понять, изменил ли он свое состояние — мы тратим дополнительную энергию. Оптимально бы было вообще не фокусировать взгляд на мыши, всегда смотреть сквозь.
Вывод: для ссылок из указанного контекста следует усилить контраст, изменяя состояние самих ссылок при наведении.
Ссылка в тексте
Ситуация выглядит совсем иначе для ссылок, помещенных в текст. Курсор над текстом совсем другой природы, формы и размера, нежели курсор над ссылкой. Отчетливо видно, что контур руки как бы распахивается, разворачивается из свернутого состояния.
Поэтому для ссылок в тексте можно отказаться от дополнительного усиления контраста состояний.
Ссылка среди ссылок
Часто много ссылок сосредоточено в одном и том же месте, например, в облаке тегов. В этом случае, при перемещении по ссылкам мы не будем замечать изменения курсора: он всегда будет оставаться в форме указательного пальца.
Очевидно, что скученные вместе ссылки требуют увеличения контрастности своих состояний дополнительными анимациями цвета, подчеркивания, или размера при наведении.
Ссылки в меню
В ссылки, далеко стоящие от основного места кликов, тяжело попасть, плюс скользнуть по ним случайно тоже практически невозможно. Примером подобных ссылок служат всевозможные элементы меню.
Для таких ссылок логичнее сделать разницу состояний более контрастной. Кроме того, элементы меню должны показать пользователю, что он не просто открывает еще одну страницу интернета, а следует некой структуре, правильная ориентация в которой позволит ему либо получить, либо не получить то, что он хочет.
Ссылки в повторе
Ссылки, повторяющие свою структуру и взаимное расположение от элемента к элементу страницы — как, например, управляющие ссылки постов или комментов, вызывают привычку пользователя в пользовании собою. Вдобавок, такие ссылки часто используются. С одной стороны, пользователь уже умеет более точно рассчитывать свои движения, а с другой, он бы не хотел испытывать постоянного прессинга на свои органы чувств.
Для таких ссылок лучше не усиливать контраст состояний.