ховер что это в верстке
Что такое hover эффект? — TemplateMonster
Hover определяет стиль элемента при наведении на него курсора мыши.
Что такое hover?
Ховер помогает сделать дизайн сайта более интересным и побуждающим пользователя получить дополнительную информацию о теме ссылки.
Например, при наведении курсора мыши на одну из ссылок на странице, она может изменить цвет, указывая, что на нее можно нажать. Обычно такие ссылки добавляются на страницы или в тексты, чтоб переходя по ним, пользователь узнавал более точную информацию или переходил на страницу определенного товара для осуществления покупки.
На скрине выше показан пример изменения цвета при наведении курсора на определенную новость.
Примечание: Для смартфонов и планшетов, использующих палец вместо компьютерной мышки, невозможно навести курсор на объект без стороннего программного обеспечения.
Синтаксис
Пример
Basic example
Результат:
Ховер и галерея
Итак, что такое ховер понятно, но его можно использовать не только для подсветки текстовых ссылок.
Вы можете использовать :hover для создания галереи изображений с полноразмерными изображениями, которые отображаются только тогда, когда мышь наводится на миниатюру.
Все эти приемы помогают сделать сайт более современным и интересным, а пост не перенасыщать информацией, добавляя ссылки, по которым пользователь сможет получить дополнительную информацию. А ховер помогает сфокусировать внимание читателей на этих ссылках.
Hover-эффект
Hover-эффект – это технология веб-анимации, благодаря которой элементы сайта изменяют свой вид при наведении на них курсора или клике по ним.
Ховеры включают в себя множество разнообразных эффектов: изменение цвета, всплывающие подсказки и иные подписи, увеличение/смещение/трансформация/ротация объектов, плавные переходы и т.д.
Hover-эффекты способны сделать интерфейс сайта гораздо более ярким, оригинальным и привлекающим внимание посетителей. Очень часто ховерами оснащают кнопки ссылок, после чего они изменяют/инвертируют цвет, становятся прозрачными или увеличиваются в размерах при наведении курсора.
Hover-эффекты добавляют веб-дизайну интерактивности, но также могут сделать его более функциональным и удобным для пользователей. Нередко при помощи ховеров оформляют галереи изображений (для каталога товаров, портфолио и т.д.) или другого контента. По умолчанию все объекты в галерее представлены в виде миниатюр, которые увеличиваются до полноразмерного формата, если навести на них курсор мыши.
Hover-эффекты можно создавать как вручную (используя возможности языков HTML/CSS), так и при помощи встроенных инструментов популярных конструкторах сайтов: Wix, Tilda и других.
Настроить интеграцию без программистов ApiX-Drive
Статьи о маркетинге, автоматизации и интеграциях в нашем Блоге
Ховеры бывают разные
Когда у нас в 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
Не добавляем появление подложки, чтобы оставить визуальное отличие от кнопки при наведении.
Про анимацию ховеров
Практически у всех наших компонентов у ховера есть плавная анимация, но она нужна не всегда.
Без такой анимации можно обойтись в боковом меню, выпадающем списке и таблице. В том, что имеет структуру строк. Плавная анимация в таких случаях может выглядеть очень тягучей, если сделать ее слишком медленной, потому что она будет не поспевать за курсором. А если сделать ее слишком быстрой, то будет излишнее мерцание.
Но может быть и частичная анимация, например, так мы сделали у пагинации — при наведении на номер страницы подложка появляется плавно, но когда курсор уходит с нее, подложка исчезает мгновенно. Это было сделано, чтобы избежать ситуации, когда проводишь курсор по цифрам быстро и одновременно видны несколько подложек, потому что новые появляются, когда предыдущие еще не успели исчезнуть.
Оформляйте стили наведения, фокуса и активного состояния по-разному
Вот пример кода, который всегда использовал.
Когда я стал уделять больше внимания доступности интерфейса при работе с клавиатуры (состоянию фокуса в частности), пришел к выводу, что мы не должны одинаково стилизовать разные состояния элементов.
Наведение, фокус и активное состояние должны стилизоваться по-разному.
Причина проста: Это разные состояния!
Сегодня я хочу продемонстрировать вам волшебный способ оформить все три состояния без особых усилий.
Стилизация наведения (:hover)
:hover срабатывает, когда пользователь наводит на элемент курсор мыши.
Стилизация фокуса (:focus)
:focus срабатывает, когда элемент получает фокус. Это достигается двумя способами:
Когда пользователи нажимают «Tab», они не знают, к какому элементу перейдет фокус, а могут лишь предполагать. Вот почему нам нужно заметное изменение состояния — чтобы привлечь внимание пользователя на сфокусированный элемент.
В большинстве случаев оформление фокуса по умолчанию вполне подходит. Если вы хотите стилизовать его по-своему, помните об этих четырёх моментах:
Стилизация активного состояния (:active)
При взаимодействии с чем-то в реальной жизни, вы ожидаете своего рода отклик. Например, при надавливании на кнопку, вы ожидаете, что она нажмётся.
Две особенности, которые следует принять к сведению:
Стили ссылок по умолчанию
Ссылки имеют стили активного состояния по умолчанию. При нажатии они становятся красными
Взаимосвязь между :active и :focus
При удержании левой кнопку мыши на фокусируемом элементе, вызывается его активное состояние. Но одновременно с этим вызывается и состояние фокуса.
Когда вы отпускаете левую кнопку мыши, фокус остаётся на элементе.
Это относится к большинству фокусируемых элементов, кроме ссылок и кнопок.
Добавление этого кода изменит поведение нажатия кнопок на следующее:
Теперь, когда вы знаете всё необходимое о состояниях hover, focus и active, я хочу поговорить о стилизации всех трёх
Волшебная комбинация
Волшебная комбинация позволяет пользователям получать отклик, когда они наводят, фокусируются или взаимодействуют с элементом. Вот код, который вам нужен:
Для пользователей мыши:
Для пользователей клавиатуры:
Лучшее из обоих миров!
Не волшебная (но может даже лучше) комбинация
Как я упомянул выше, клики на кнопки имеют странное поведение в Safari и Firefox на Mac OS. Если вы добавили фрагмент JavaScript-кода, который я предлагал выше, магическая комбинация всё еще работает. Но не идеально.
Вот что произойдёт в Safari и Firefox на Mac OS:
Если вы считаете, что этого достаточно, то волшебная комбинация работает. Можете на этом и остановиться.
Поведение кнопки в Safari, если были стилизованы все три состояния
Вот и всё! Благодарю за чтение и надеюсь, сегодня вы узнали что-то новое.
Работа с эффектами наведения CSS
Селектор :hover определят стиль элемента при наведении курсора мыши. Этот селектор можно использовать для всех элементов, а не только для ссылок. Псевдокласс CSS :hover запускается, когда пользователь наводит указатель мыши на элемент.
Стили, определяемые активами псевдо-класса, будут переопределены любым последующим классом. Например, :link, :active или :visited, который имеет хотя бы один равный атрибут. Поэтому используйте псевдокласс hover после :link и :visit, но перед :active.
Пример ссылок с разными стилями:
Выпадающее меню
Пример, в котором мы будем отображать выпадающее меню при наведении курсора мыши:
Другой стиль
Еще один пример эффекта при наведении, но уже с другим стилем:
Нижняя граница становится фоном
Пример, в котором при наведении курсора на ссылку нижняя граница строки увеличивается и становится фоном:
Уменьшение интенсивности цвета
Эффект :hover, который проявляется уменьшением интенсивности цвета. Это отличный способ привлечь внимание к важному элементу на странице:
Увеличение ширины и высоты
Вы можете использовать свойство transform для увеличения ширины и высоты элемента при наведении курсора:
Вращение элемента
CSS-преобразования также можно использовать для реализации эффекта вращения элемента
Изменение формы элемента
Еще один популярный эффект – превращение круглого элемента в квадратный и наоборот
Изменение цвета границ
Еще один интересный эффект – изменение цвета границ элемента при наведении курсора. Для его реализации применяется переход с использованием тени для блока:
Поддержка браузерами: Google Chrome, Microsoft Edge, Firefox, Opera, Safari.
Заключение
CSS3 позволяет создавать множество красивых эффектов без использования Java Script. Это доказывают приведенные выше примеры.
Дайте знать, что вы думаете по этой теме материала в комментариях. За комментарии, подписки, дизлайки, отклики, лайки огромное вам спасибо!
Пожалуйста, оставляйте ваши отзывы по текущей теме материала. За комментарии, дизлайки, подписки, отклики, лайки низкий вам поклон!