Hover что такое: Что такое 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

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

Про анимацию ховеров

Практически у всех наших компонентов у ховера есть плавная анимация, но она нужна не всегда.

Без такой анимации можно обойтись в боковом меню, выпадающем списке и таблице. В том, что имеет структуру строк. Плавная анимация в таких случаях может выглядеть очень тягучей, если сделать ее слишком медленной, потому что она будет не поспевать за курсором. А если сделать ее слишком быстрой, то будет излишнее мерцание.

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

:hover — CSS — Дока

Кратко

Скопировано

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

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

Скопировано

a:hover {  /* Стили */}
          a:hover {
  /* Стили */
}

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

:hover

Скопировано

.link:hover {  /* Стили */}
          .link:hover {
  /* Стили */
}

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

:hover

Скопировано

li .link:hover {  /* Стили */}
          li .link:hover {
  /* Стили */
}

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

:hover

Скопировано

#id:hover {  /* Стили */}
          #id: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;
  }
}
Открыть демо в новой вкладке

🎁

Условие any-hover: hover допускает устройства с сенсорным экраном, но только если подключено дополнительное устройство ввода с нужной функциональностью для ховера (мышь, тачпад и т.

п.)

Таким образом, мы успешно задали стили по наведению на ссылку, которые не будут учтены на мобильных устройствах, но заработают, если имеется курсор.

По аналогии можно использовать и другое состояние — :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 — :focus — :hover — :active.

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

Hover Определение и значение | Dictionary.com

  • Основные определения
  • Синонимы
  • Тест
  • Связанный контент
  • Примеры
  • Британский

Показывает уровень сложности слова.

[ huhv-er, hov- ]

/ ˈhʌv ər, ˈhɒv- /

Сохранить это слово!

См. синонимы для: hover / hovered / hovering на Thesaurus.com

Показывает уровень оценки в зависимости от сложности слова.

глагол (используется без дополнения)

висеть, развеваясь или подвешенный в воздухе: Вертолет завис над зданием.

продолжать медлить; подождите под рукой.

оставаться в неопределенном или нерешительном состоянии; колебаться: колебаться между жизнью и смертью.

Компьютеры. чтобы навести указатель на область экрана, не щелкая и не касаясь, как с помощью мыши или стилуса: наведите указатель мыши на значок, чтобы открыть дополнительную информацию.

глагол (используется с дополнением)

, чтобы вызвать зависание.

Компьютеры. поместить (указатель) на область экрана, не щелкая и не касаясь.

существительное

действие или состояние парения.

ДРУГИЕ СЛОВА ДЛЯ зависания

3 колебание, пауза, колебания.

См. синонимы для наведения курсора на Thesaurus.com

ВИКТОРИНА

ВСЕ ЗА(U)R ЭТОГО БРИТАНСКОГО ПРОТИВ. АМЕРИКАНСКИЙ АНГЛИЙСКИЙ ВИКТОРИНА

Существует огромная разница между тем, как люди говорят по-английски в США и Великобритании. Способны ли ваши языковые навыки определить разницу? Давай выясним!

Вопрос 1 из 7

Правда или ложь? Британский английский и американский английский различаются только сленговыми словами.

Происхождение парения

Впервые записано в 1350–1400 гг.; Среднеанглийское hoveren, частое слово hoven «парить», неясного происхождения

исследование синонимов слова hover

1. См. fly 2 .

ДРУГИЕ СЛОВА ОТ hover

hover·er, существительноеhover·er·ing·ly, наречие

Слова рядом hover

Hovawart, hove, hovea, hovel, hoven, hover, hovercraft, hover fly, hovering акцент, парящий акт, парящее судно

Dictionary.com Полный текст Основано на словаре Random House Unabridged Dictionary, © Random House, Inc., 2023

Слова, относящиеся к зависанию

дрейф, мерцание, трепетание, полет, задержка, уравновешенность, колебание, танец, порхание, порхание, размышляние, зависание

Как использовать зависание в предложении

  • Мне потребовалась вся моя концентрация, чтобы просто попытаться удержать стабильное зависание, по сути, и безопасно посадить пловца.

    Сохраняйте спокойствие под давлением благодаря урокам, извлеченным из самых стрессовых профессий в мире|Роб Вергер|8 января 2021 г.|Популярная наука

  • Google открывает эти задачи в окне при наведении курсора в правой части страницы.

    Новый инструмент проверки URL-адресов Bing: что он делает и зачем его использовать|Барри Шварц|30 июля 2020 г.|Search Engine Land

  • Специальные костюмы позволяют вам и вашей команде парить над пропастями и прыгать на сверхчеловеческую высоту.

    Кевин Спейси играет разжигателя войны, похожего на Фрэнка Андервуда, в «Call of Duty: Advanced Warfare»|Алек Кубас-Мейер|8 ноября 2014 г.|DAILY BEAST

  • Он также неоднократно связывал ее с президентом Обамой, чей рейтинг одобрения в штате колеблется в районе 30-х.

    Нанн-Пердью: Дьявол спустился в Перри, штат Джорджия|Патриция Мерфи|10 октября 2014 г.|DAILY BEAST

  • ИНТЕРАКТИВНО: наведите указатель мыши на маркеры, чтобы узнать больше из каждого диапазона об их возрасте и ограничениях на огнестрельное оружие для детей.

    Где дети в возрасте 5 лет учатся стрелять из автоматического оружия|Брэнди Задрожный|10 сентября 2014 г.|DAILY BEAST

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

    Есть ли Ma Joad для эпохи Пикетти?|Кэти Бейкер|1 июля 2014|DAILY BEAST

  • Его рейтинг одобрения, что невероятно, колеблется в районе 40-процентной отметки.

    Как Роб Форд мог выиграть переизбрание|Айвор Тосселл|3 января 2014|DAILY BEAST

  • Они зацепили его цепями от ламп прямо над обеденным столом, а затем доели десерт.

    Книга анекдотов и бюджет веселья;|Разное

  • Все они время от времени были рады парить вокруг костра; и особенно, когда они ели свои завтраки.

    Девочки Центральной школы на сцене|Гертруда В. Моррисон

  • Иногда Обсерватория Времени точно определяла возраст и зависала над ним, пока его товарищи делали кропотливые исторические заметки.

    Человек из Времени|Фрэнк Белкнап Лонг

  • Поскольку ваши гости будут приходить в любое время, вы должны стоять у двери, чтобы приветствовать каждого входящего.

    Книга женского этикета и руководство по вежливости|Флоренс Хартли

  • Уриас уносится на дно реки гоблинами и духами, которые выходят и парят над ней ночью.

    FRDRIC MISTRAL | Чарльз Альфред Даунер

Британский словарь определения для Hover

Hover

/ (ˈHɒVə) /

VERB

(Intry Intry). птицы, особенно ястребы) оставаться на одном месте в воздухе, быстро взмахивая крыльями

(intr) неуверенно медлить с нервным или заботливым видом

(intr) находиться в состоянии нерешительностиона зависла между двумя женихами

(tr) вычисляя удержать (указатель мыши) над определенной областью на веб-страница без щелчка, чтобы вызвать меню, информационное окно и т. д.

сущ.0016 C14: hoveren, вариант слова hoven, неясного происхождения

Английский словарь Коллинза — полное и полное цифровое издание 2012 г. © William Collins Sons & Co. Ltd., 1979, 1986 © HarperCollins Publishers 1998, 2000, 2003, 2005, 2006, 2007, 2009, 2012

Наведение — определение, значение и синонимы

зависание; завис; парит

А парит корабль летит низко над землей или водой — это парит . Hover также может означать колебания. Подумайте о ком-то, кто не может точно решить, где приземлиться.

Чтобы помочь запомнить значение hover , подумайте о нем как о содержащем предлог над : вещи , которые нависают

над . Температура может колебаться около сорока градусов, оценка в классе может

Определения зависания

  1. глагол

    висеть в воздухе; летать или быть подвешенным выше

  2. глагол

    быть подвешенным в воздухе, как бы вопреки гравитации

    синонимы: левитировать
    левитировать

    заставить подняться в воздух и парить, как будто вопреки гравитации

  3. глагол

    похмелье, как от чего-то угрожающего, темного или угрожающего

    синонимы: выводок, большой объем, ткацкий станок

  4. глагол

    задерживаться или оставаться рядом с местом

    синонимы: задерживаться

  5. глагол

    быть в нерешительности относительно чего-либо; колебаться между конфликтующими позициями или курсами действий

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

ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ: Эти примеры предложений появляются в различных источниках новостей и книгах, чтобы отразить использование слова «зависание» .

No related posts.

Автор записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *