Hover на мобильных устройствах: html — Как починить :hover под мобильные устройства?

Содержание

Работает ли css hover на мобильных устройствах?

Работает ли css hover на мобильных устройствах? У меня есть класс css hover, который отлично работает в обычном веб-браузере, но не работает в мобильных браузерах.

css

mobile

hover

Поделиться

Источник


Sam    

11 марта 2010 в 18:05

10 ответов

  • Работает ли плагин fullcalendar на мобильных устройствах

    Я хочу использовать плагин fullcalendar ( http://fullcalendar.io/wiki/Support/ ). он поддерживает только событие click. Будет ли он работать на мобильных устройствах с сенсорными событиями / жестами свайпа. Кроме того, можем ли мы сделать его отзывчивым для мобильных устройств и вкладок?

  • Как отключить правила css на мобильных устройствах

    Я создал класс в файле wordpress css .leftfloat{ float:left; padding-right:10px; } Я использую его в постах для обертывания текста вокруг изображений вот так: <div class =leftfloat > image code or ad code </leftfloat> Он работает на PC и мобильных устройствах. Однако я хочу отключить…


36

Псевдокласс :hover нуждается в указывающем (графическом вводе) устройстве, способном различать действия указывающего и selecting/activating. обычно на мобильных устройствах с сенсорным интерфейсом у вас нет первого, только второго. Кроме того, некоторые интерфейсы пера позволяют только активировать, а не указывать.

Псевдокласс :hover применяется, когда пользователь обозначает элемент (с помощью некоторого указывающего устройства), но не активирует его. Например, визуальный агент пользователя может применить этот псевдокласс, когда курсор (указатель мыши) нависает над полем, сгенерированным элементом. Агенты пользователей, не поддерживающие interactive media, не должны поддерживать этот псевдокласс. Некоторые соответствующие пользовательские агенты, поддерживающие interactive media, могут не поддерживать этот псевдокласс (например, устройство пера).

— W3C: CSS 2.1: селекторы, динамические псевдоклассы

Итак, чтобы ответить на ваш вопрос: это зависит от устройства, но, скорее всего, нет. И не полагайтесь на него. С быстро набирающими популярность устройствами с сенсорным экраном вы потеряете всю полноту событий, связанных только с указанием.

Поделиться


Joey    

11 марта 2010 в 18:08


32

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

Еще немного информации здесь: http://designshack.net/articles/css/are-hover-events-extinct/

Поделиться


Andy Baker    

01 октября 2012 в 10:59


9

Что означает вопрос » работает ли css hover на мобильных устройствах?»?

Он, очевидно, не имеет в виду это буквально, потому что нет такой вещи, как наведение на мобильные устройства, поэтому она не может работать.

Если он имеет в виду «на мобильных устройствах, если я нажму на объект со стилем наведения, что-нибудь произойдет?» ответ-Да, но то, что происходит, зависит от device/browser.

В частности, на iPhone/Safari и Android ответ выглядит так, как если бы вы написали обработчик событий OnClick() с изменением стиля в нем, и это сохраняется до тех пор, пока вы не нажмете на другой объект. На телефоне Windows изменение стиля происходит, когда ваш палец прижат к телефону, а затем возвращается, когда вы его отпускаете.

Вы можете проверить свое устройство на испытательном полигоне, который я установил в davidleader.net/mobiledemo.html .

Поделиться


David    

28 ноября 2014 в 15:22

  • jQuery imgAreaSelect не работает на мобильных устройствах

    В одном из наших проектов мы использовали плагин imgAreaSelect для обрезки и изменения размера изображения. Хотя он прекрасно работает на настольных компьютерах, но на мобильных устройствах он вообще не работает. Есть ли какая-либо работа вокруг, чтобы справиться с этой проблемой, или любой другой…

  • jQuery: fadeIn / fadeOut on hover — альтернативы на мобильных устройствах?

    Я использую fadeIn и fadeOut в jQuery, и это прекрасно работает на рабочем столе. Однако на мобильных устройствах (хотя я тестировал только на iPhones) дочерний div открывается при прикосновении, но не скрывается после прикосновения к внешнему элементу. Я довольно новичок в jQuery, поэтому не…


7

Нет, если только устройство не может обнаружить, когда кто-то наводит палец на экран, собираясь нажать.

Поделиться


Nathan Long    

11 марта 2010 в 18:11


3

Это зависит от браузера, используемого в мобильном устройстве. Обратитесь к режиму Quirks для мобильных устройств и посмотрите, будет ли ваш браузер / платформа реализовывать его.

Поделиться


Digicoder    

11 марта 2010 в 18:08


3

По моему собственному опыту, он отлично работает на моем iphone4, независимо от браузера (safari или chrome), но не работает должным образом на моем nexus10 с chrome…

Я использовал: hover для реализации меню. Когда я говорю «это работает», я имею в виду, что первое прикосновение ведет себя как наведение курсора мыши на рабочий стол, а второе прикосновение будет вести себя как щелчок.
Когда я говорю «это не работает», я имею в виду, что прикосновение ведет себя как щелчок непосредственно…

Поделиться


dajam    

28 марта 2013 в 09:45


0

Я бы сказал, что нет, так как вы не зависаете в мобильном интерфейсе. Вы можете просто нажать, если на сенсорном экране. В противном случае вы просто перемещаетесь по ссылкам.

Поделиться


Dustin Laine    

11 марта 2010 в 18:08


0

не будет делать свою магию на сенсорных устройствах, но она работает на мобильных телефонах, где пользователь перемещается с помощью некоторых клавиш со стрелками (или на amazon kindle)

Поделиться


silverskater    

13 июля 2011 в 06:23


0

также работает для устройств blackberry storm 1, так как у них есть сенсорные и щелкающие события из-за их suedo-тактильных экранов.

Поделиться


rlemon    

30 августа 2011 в 19:37


0

: hover работает с браузером android по умолчанию, но это действительно сложно (для пользователя), чтобы вызвать наведение без запуска щелчка в то же время.

Поделиться


Peter Zeller    

08 сентября 2011 в 18:31

Похожие вопросы:

CSS hover вдруг работает в мобильных браузерах?

Это действительно странно. Я не жалуюсь, что что-то работает, но это очень удивительно .. На моем сайте у меня был обычный css :hover для навигации, чтобы показать подлинки. Но в мобильных браузерах…

Удалите событие: hover на мобильных устройствах

У меня есть событие :hover , работающее на веб-сайте, но у меня есть проблема, когда вы используете систему на мобильных устройствах. Есть ли способ удалить его в css или js? Я перепробовал так…

Как работает css max-width на мобильных устройствах?

Я немного запутался здесь — у меня есть стиль css со следующим: @media (max-width: 855px) { #page { //declarations } } Это хорошо работает на моем рабочем столе, браузер устанавливает стиль, когда я. ..

Работает ли плагин fullcalendar на мобильных устройствах

Я хочу использовать плагин fullcalendar ( http://fullcalendar.io/wiki/Support/ ). он поддерживает только событие click. Будет ли он работать на мобильных устройствах с сенсорными событиями / жестами…

Как отключить правила css на мобильных устройствах

Я создал класс в файле wordpress css .leftfloat{ float:left; padding-right:10px; } Я использую его в постах для обертывания текста вокруг изображений вот так: <div class =leftfloat > image…

jQuery imgAreaSelect не работает на мобильных устройствах

В одном из наших проектов мы использовали плагин imgAreaSelect для обрезки и изменения размера изображения. Хотя он прекрасно работает на настольных компьютерах, но на мобильных устройствах он…

jQuery: fadeIn / fadeOut on hover — альтернативы на мобильных устройствах?

Я использую fadeIn и fadeOut в jQuery, и это прекрасно работает на рабочем столе. Однако на мобильных устройствах (хотя я тестировал только на iPhones) дочерний div открывается при прикосновении, но…

CSS: наведение, фокусировка или активация не работают на мобильных устройствах

У меня есть простая карта, когда я навожу на нее карточную шкалу. Но на мобильных устройствах не работает hover, focus или active. На мобильных устройствах мне нужно, когда кто-то нажимает на эту…

CSS переход не работает на мобильных устройствах

Пожалуйста, взгляните на анимацию ниже. Хотя вы можете видеть, что он работает на PC, должно быть, что-то не так, так как он не работает на мобильных устройствах. Например, на Android изображение…

Мобильный-отзывчивость, работает в Интернете, не работает на мобильных устройствах

У меня есть сайт, girlsjustwannahavefont.com Сайт почти готов, но функциональность сомнительна на мобильных устройствах. Когда я нажимаю на кнопку просмотреть мой процесс на мобильных устройствах,. ..

Отключить эффекты наведения в мобильных браузерах

Я понял из вашего вопроса, что ваш эффект наведения меняет содержимое вашей страницы. В таком случае мой совет:

  • Добавьте эффекты наведения на touchstartи mouseenter.
  • Удалить парения воздействие на mouseleave, touchmoveи click.

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

Чтобы имитировать мышь, браузеры, такие как Webkit Mobile, запускают следующие события, если пользователь касается и отпускает палец на сенсорном экране (например, iPad) (источник: Touch And Mouse на html5rocks.com):

  1. touchstart
  2. touchmove
  3. touchend
  4. Задержка 300 мс, когда браузер проверяет, что это одно нажатие, а не двойное.
  5. mouseover
  6. mouseenter
    • Примечание . Если событие mouseover, mouseenterили mousemoveизменяет содержимое страницы, следующие события никогда не запускаются.
  7. mousemove
  8. mousedown
  9. mouseup
  10. click

Невозможно просто указать веб-браузеру пропустить события мыши.

Что еще хуже, если событие наведения указателя мыши изменяет содержимое страницы, событие click никогда не запускается, как объясняется в Safari Web Content Guide — Handling Events , в частности на рисунке 6.4 в One-Finger Events . Что такое «изменение содержимого», будет зависеть от браузера и версии. Я обнаружил, что для iOS 7.0 изменение цвета фона не является (или больше не?) Изменением содержимого.

Резюмируем:

  • Добавьте эффекты наведения на touchstartи mouseenter.
  • Удалить парения воздействие на mouseleave, touchmoveи click.

Обратите внимание, что на touchend!

Это явно работает для событий мыши: mouseenterи mouseleave(слегка улучшенные версии mouseoverи mouseout) запускаются, а также добавляют и удаляют наведение.

Если пользователь действительно clickпереходил по ссылке, эффект наведения также удаляется. Это гарантирует, что он будет удален, если пользователь нажмет кнопку «Назад» в веб-браузере.

Это также работает для сенсорных событий: при сенсорном запуске добавляется эффект наведения. Это » ‘не’ » удалено при касании. Он добавляется снова mouseenter, и поскольку это не вызывает изменений содержимого (оно уже было добавлено), clickсобытие также запускается, и по ссылке переходят без необходимости повторного нажатия пользователем!

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

Если пользователь решает отменить щелчок, движение пальца будет происходить как обычно. Обычно это проблема, поскольку mouseleaveсобытие не запускается, а эффект наведения остается на месте. К счастью, это можно легко исправить, убрав эффект зависания touchmove.

Это оно!

Обратите внимание, что можно удалить задержку в 300 мс , например, с помощью библиотеки FastClick , но это выходит за рамки этого вопроса.

Я обнаружил следующие проблемы со следующими альтернативами:

  • Обнаружение браузера: Чрезвычайно подвержен ошибкам. Предполагается, что устройство оснащено мышью или сенсорным экраном, в то время как их комбинация станет все более и более распространенной по мере увеличения количества сенсорных дисплеев.
  • Обнаружение мультимедиа CSS: единственное известное мне решение только для CSS. По-прежнему подвержен ошибкам и по-прежнему предполагает, что на устройстве есть мышь или сенсорный экран, хотя оба варианта возможны.
  • Эмулировать событие щелчка в touchend: это приведет к неправильному переходу по ссылке, даже если пользователь хотел только прокрутить или увеличить масштаб без намерения фактически щелкнуть ссылку.
  • Использовать переменную для подавления событий мыши: это устанавливает переменную в, touchendкоторая используется в качестве условия if в последующих событиях мыши, чтобы предотвратить изменения состояния в этот момент времени. Переменная сбрасывается в событии щелчка. См. Ответ Уолтера Романа на этой странице. Это достойное решение, если вам действительно не нужен эффект наведения на сенсорные интерфейсы. К сожалению, это не работает, если touchendзапускается по другой причине и не запускается событие щелчка (например, пользователь прокручивает или увеличивает масштаб), а затем пытается перейти по ссылке с помощью мыши (например, на устройстве с интерфейсом мыши и сенсорного экрана). ).

Hover на мобильных устройствах

На ПК (без тачскрина) при наведении мышкой на строку таблицы меняется её фон с белого на #ddd.
Проблема в том, что при прокрутке на тачскринах (телефонах), на месте установки пальца на экране (на строке таблицы) фон #ddd застывает и не станет вновь белым до того, пока я не нажму на другую область экрана.

Хотелось бы понять, как можно решить эту проблему.
Т.е. нужно, чтобы на touch-устройствах .tables th:hover отрабатывал или как .tables th:focus , или вообще как .tables th:hover

Как такое можно реализовать на чистом JS или CSS?
На сайте используется JQuery. Modernizr не используется и подключать его из-за такой неприятной мелочи не хочется.

Всем привет, прошу совета.
Есть выпадающее меню, реализованное через css :hover, т.е. есть пункт меню, при наведении срабатывает hover и подменю у данного пункта меняет свойство display на block, после того как убрали мышь, снова становится none. На обычном ПК все хорошо, но на мобильных из-за отсутствия возможности просто навести данная реализация не работает. Как можно это поправить? Чтобы на мобильных устройствах меню тоже выпадало (сейчас при клике оно выпадает, но сразу же переходит по ссылке на первом пункте). Если же это нереально, то как можно реализовать меню, чтобы оно было выпадающим и работало на всех устройствах (те примеры, что я находил через jquery, не подходят, т.к. там основные пункты меню не работают как ссылки, т.е. при клике на них меню просто выпадает, а нужен переход).

Тут из пункта О компании выпадает Вакансии.

Псевдокласс :hover в сочетании со свойством transition часто применяется для создания различных анимационных эффектов при наведении курсора мыши на элемент. На мобильных устройствах :hover по понятным причинам не работает — там нет курсора, а взаимодействие происходит касанием пальца. Поэтому для создания эффектов заменим :hover на :focus .

Надо учитывать, что фокус могут получить не все элементы веб-страницы, а только ссылки, кнопки, поля формы. Чтобы заставить работать :focus для, скажем, изображений, надо добавить к ним атрибут tabindex — он позволяет переходить к изображениям через клавишу Tab . В качестве значения указываются целые числа, переход происходит от элемента с меньшим значением к элементу с большим значением.

В примере 1 добавлено три , при щелчке по картинке происходит увеличение масштаба через свойство transform. Стоит щёлкнуть по другой картинке или свободному месту веб-страницы, как изображение возвращается к исходному размеру.

Пример 1. Масштабирование картинок при фокусе

Результат данного примера показан на рис. 1.

Рис. 1. Масштабирование картинок при получении фокуса

Чтобы :focus работал для , к ним добавлен атрибут tabindex , что к тому же позволяет переходить от одной картинке к другой через клавишу Tab .

События касания на веб-страницах — Ховер H6

Дата публикации: 2013-09-27

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

Тот факт, что этот переход работает так гладко – немного из области чудес, и позволяет таким моделям взаимодействия, как CSS 3D Origami. отвечать одинаково хорошо на касание пальцем или движение курсора, не требуя при этом дополнительного кодирования.

Однако разработчики не могут предусмотреть каждую случайность. Неизбежно возникают ситуации, где CSS :hover не транслирует на сенсор так, как от него ожидается или требуется. В подобных случаях вам придется либо пересмотреть модель взаимодействия, либо кодировать пользовательский интерфейс так, чтобы сделать его подходящим для управления прикосновением.

Основные понятия

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

Удостоверьтесь, что области для прикосновения пользовательского интерфейса по меньшей мере размером 50px × 50px. Весьма сложно точно нажать маленький элемент.

Практический курс по созданию веб-приложения на PHP & MySQL с нуля!

Изучите курс и создайте ваше первое приложение на PHP всего за 3 дня!

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

Сложно избежать некоторой задержки. Сейчас большая часть мобильных платформ имеют встроенный период ожидания в 300мс для веб-событий касания. Эта ⅓-секундная задержка может действительно оказаться важной для ваших пользователей. Мы обсудим решения этой проблемы в следующей статье: а сейчас поймите, что пользовательский интерфейс на мобильном устройстве из-за этого не будет ощущаться как «моментальный». Уменьшение или устранение любых задержек перехода для мобильных пользователей – очевидный первый шаг к исправлению этой проблемы.

Выявление сенсорных возможностей устройства

Точное определение сенсорных возможностей устройства усложнилось с появлением IE 10, который щедро докладывает о наличии сенсорных возможностей даже у тех устройств, которые физически не могут поддерживать подобные действия. Самый эффективный известный мне код – следующий:

В качестве функции его можно вызывать в своем коде почти где угодно:

Управление событиями касания

В зависимости от контекста и платформы событие касания запустит несколько действий:

touchstart → mouseneter → mousedown → click → mouseup → mouseleave → touchend

Наличие и порядок внутренних действий в разных платформах различаются, и любая из них может неверно перевести события CSS :hover или :focus. Чтобы полностью отменить действия, отвяжите их от элементов с помощью JQuery:

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

Это следует делать внимательно, принимая во внимание возрастающее количество гибридных устройств, предлагающих сенсорный и «мышиный» ввод: как разработчики, мы не можем предвидеть, каким образом будет производиться взаимодействие. Все, что мы отвязываем, нужно немедленно привязать к решению:

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

Повышенная активность? Обойдемся без повторений.

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

Заметьте, что это касается не всех мобильных браузеров: в данное время невозможно контролировать в отношении действий двойного касания мобильный Firefox или основной браузер Android.

Планшетная и мобильная версии проектов – Readymag Help

Помимо десктопной, вы можете создать отдельную планшетную и/или мобильную версию вашего проекта. Кликните по иконке ноутбука в нижнем левом углу окна редактора и активируйте Mobile для создания мобильной версии вашего проекта.

После активации переключателя мобильная версия создается автоматически (Mobile Auto-layout), при этом все виджеты в ней выстраиваются в единую колонку.

Вы можете поменять расположение и настройки виджетов, а также отключить автоматическую расстановку виджетов, кликнув по иконке «стрелка» на панели выбора версий.

Обратите внимание: вернуться к предыдущим версиям можно только до тех пор, пока вы не обновите страницу.

Дополнительно вы можете создать планшетную версию вашего проекта, которая также будет отображаться в мобильном вьюпорте при повороте телефона в горизонтальное положение. Кликните на иконку «плюс» рядом со значком мобильной версии и включите опцию Tablet and Landscape Mobile. Чтобы деактивировать планшетную версию, отключите эту опцию и нажмите на значок «минус».

Обратите внимание: Если у вас неактивна планшетная версия, при повороте телефона в горизонтальное положение отобразится десктопная версия проекта. На планшетах в пейзажной ориентации всегда отображается десктопная версия проекта.

Несколько советов:

  • Используйте клавиши на клавиатуре для переключения между десктопной (1), планшетной (2) и мобильной (3) версиями проекта. Эта функция доступна и в конструкторе страниц, и в режиме предпросмотра (Preview).
  • Для того чтобы изменить длину страницы, потяните за синий ромб в нижней части экрана. Другой вариант — кликните по нему и введите точное значение для длины в пикселях.

Обратите внимание: для мобильной версии проекта не доступна анимация On Hover («По наведению»). 

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

«Hover Effect» для мобильных кнопок

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

Читайте также:

В каких случаях необходимы кнопки с индикатором загрузки

Почему не нужно выделять неактивные кнопки серым цветом

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

Удаление зависающего hover-эффекта недостаточно. Пользователи мобильных гаджетов нуждаются в визуальной обратной связи, потому что ошибочное нажатие кнопки – это очень распространенная проблема. Целевые размеры мобильных кнопок меньше десктопных версий, и их сложнее нажимать. От силы нажатия тоже многое зависит. Она должна быть установленной, т.к. иногда силы нажатия бывает недостаточно для активации действия, кнопка просто его не распознает.

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

Волновая анимация интуитивно понятна, потому что она имитирует прикосновение воды. Когда вы бросаете камень в пруд, на поверхности появляется рябь, это означает, что камень коснулся воды. Эффект ряби обеспечивает понятный визуальный фидбек для пользователя.

Важно преобразовать эффекты наведения в мобильные пульсации. Это придает пользователям уверенности в том, что они точно нажимают необходимую им кнопку. Это не совсем hover-эффект, но он обеспечивает ту же визуальную обратную связь, которая нужна пользователям при взаимодействии с кнопками.

Создание кастомного title

Кастомный «title» (в простонародье tooltip — «Подсказка»)


Проблема

  1. В мобильной версии сайта не отображался стандартный html-атрибут «title», так как нет реакции на наведение.;

  2. На сайте html-атрибут «title» содержит текст разного размера и ссылки на другие страницы, при этом перейти по ссылкам не представлялось возможным.

Решение

Для элементов на которых должны отображаться подсказки используется тег «span», к которому добавляется data-атрибут, который мы назвали «data-comment». С помощью класса «.js-span-comment» инициализируется работа js-скрипта.


Javascript использует метод innerHTML, благодаря чему мы можем вставлять содержимое атрибута в виде верстки:


Как работает Javascript код:


Пояснения к коду:


  1. Функция самовызывающаяся, сделана в виде модуля. Внутри есть главный метод init(), в котором мы ищем все подсказки на странице. Если мы не находим ни одного, тогда функция завершается;

  2. Если мы находим подсказку, тогда на документ мы вешаем слушателя с событием «click». По клику мы проверяем наличие data-атрибута. Если data-атрибут найден, мы проверяем переменную «flag», если у неё значение «true», тогда мы создаем подсказку. Создается он динамически. Переменная «flag» переключается в «false», чтобы не было создания повторной подсказки;

  3. Также мы вешаем на window событие «scroll», по которому любая открытая подсказка будет удалена из документа;

  4. Есть дополнительное условие, при котором мы проверяем ширину экрана при первичном срабатывании функции. Если ширина > 992 px., тогда на подсказку мы вешаем событие «mouseover» (когда курсор находится над тегом «span», который должен показать подсказку). Таким образом мы эмулируем событие «hover». Исчезает подсказка, только если сначала навести на неё курсор, а потом убрать. Сделано это ради того, чтобы пользователь мог скопировать содержимое, либо перейти по ссылке, указанной в подсказке.

Как позиционируется подсказка:


Системный тег «title» не зависит от ширины экрана браузера и появляется в том месте, где мы навели курсор.


В нашем случае подсказка — это «span» со своими стилями и требовалось выбрать объект, относительно которого должно быть позиционирование. Можно было привязать так же к курсору, но тогда возникли бы проблемы, когда пользователь мог вызвать подсказку у края экрана (например слева, слишком близко к краю). Поэтому было выбрано позиционирование от начала строки, потому что некоторые блоки, на которые должна быть подсказка, могут быть очень длинными и в зависимости от ширины экрана находится в разных местах.


Как работает позиционирование:


При создании подсказки мы находим координаты нашего блока с подсказкой. После чего, вычисляем координаты относительно окна браузера и позиционирования подсказки с {position:fixed} в CSS-стилях. Координаты находим с помощью метода
getBoundingClientRect(). Координата «left» = это left нашего блока с подсказкой. Координата «top» = это сумма высоты нашего блока + координата «top» + 3 px. (чтобы наша подсказка не закрывала текст).

Результат


Когда требуется дополнительный функционал (см. примеры ниже), можно использовать кастомную подсказку. В остальных случаях лучше обойтись стандартным тегом «title».


  1. На мобильных устройствах появилась возможность отображать подсказки и взаимодействовать с ними:


  2. Появилась возможность копировать текст из подсказок:


  3. Появилась возможность переходить по ссылкам в подсказке:

«Эффект наведения» для мобильных кнопок

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

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

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

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

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

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

Филиалы

Наконец, единственное решение CSS для: наведения курсора на сенсорные экраны | автор: Mezo Istvan

Проблемы с псевдоклассом : hover возникали с тех пор, как первый веб-браузер был установлен на устройстве с сенсорным экраном.Конечно, были решения, но ни одно из них не было решением и . С новыми медиа-запросами уровня 4 эта проблема, похоже, решена навсегда.

Допустим, вы просто добавили стиль : hover к элементу своей веб-страницы, чтобы он получал некоторый стиль при наведении курсора мыши на него. Легкий.

Парение на рабочем столе. Источник: https://proper-hovering.glitch.me

Проблема возникает, когда пользователь взаимодействует с этим элементом на сенсорном экране: после того, как нажатие было выполнено, эффект зависания на элементе застревает.Это также происходит, когда элемент даже не активируется касанием, например, если к нему прикоснулись во время прокрутки.

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

Однако становится еще хуже: после остановки перетаскивания эффект зависания остается активным!

Парение на сенсорном экране (эмулировано).Источник: https://proper-hovering.glitch.me

Это определенно запутает некоторых ваших пользователей, а это никогда не бывает хорошо. Что-то нужно делать.

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

  body.nontouch   nav a: hover  {
 фон: желтый; 
}

У этого есть несколько проблем с самого начала:

  1. Разработчик может создать сценарий обнаружения, который хорошо работает сегодня, но как насчет двух месяцев, когда появится какая-то новая технология? Ноутбуки с сенсорными экранами? Съемные сенсорные экраны? Apple Pencil? Я бы не стал беспокоиться об этом во время разработки.
  2. Можно было бы подумать, что у сообщества JS есть готовый пакет, предназначенный именно для этой проблемы, но это не так.
  3. При использовании JS-фреймворка на основе компонентов с инкапсулированными стилями это решение просто бросает вызов. Каждый раз, когда используются эффекты наведения, стили этого компонента должны ссылаться на этот глобальный класс. Неудобно.
  4. Не два проекта, в которых используется это решение, будут одинаковыми. Может быть, одно хорошо работает на специальном устройстве, а другое — нет. Должен быть стандартизированный способ решения этой проблемы.

Введите медиа-запросы уровня 4

Медиа-запросы великолепны.Они единолично создали адаптивный веб-дизайн и являются краеугольным камнем современной мобильной веб-разработки. В качестве отличной инициативы W3C добавил Interaction Media Features в качестве кандидата в рекомендации для L4 Media Queries, которые мы можем использовать для различения устройств с сенсорным экраном.

Включены четыре медиа-запроса: наведение, любое наведение, указатель и любой указатель. Они предоставляют информацию о возможности зависания и типе пользовательского ввода. Информация может относиться только к первичному вводу или к любому доступному вводу.Например, @media (hover: hover) будет истинным, если основной ввод может зависать (например, курсор мыши), и @media (любой-указатель: грубый) будет истинным, если какой-либо ввод имеет ограниченную точность ( например сенсорный ввод). Эти мультимедийные функции предоставляют достаточно информации для правильной обработки : hover .

Одна проблема заключается в том, что эти запросы на данный момент являются всего лишь кандидатом на рекомендацию, а это означает, что они могут быть изменены или даже удалены в любое время. Помните об этом при работе с ними и решите, работает ли это для вашего проекта.В настоящий момент это определенно работает для нас, и мы возлагаем большие надежды на эти спецификации. Тот факт, что все основные браузеры реализовали эти запросы (за исключением, конечно, IE), делает нас еще более оптимистичными в отношении будущего.

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

С точки зрения UX, мы ищем решение, которое будет наименее запутанным и наиболее приятным для пользователя.

Это означает отсутствие эффектов наведения на устройствах с сенсорным экраном и их использование везде.Особым случаем здесь являются ноутбуки с сенсорными экранами, но мы можем ожидать, что мышь / тачпад используется большую часть времени. Даже если есть эффект зависания при наведении курсора, пользователь может легко использовать мышь / сенсорную панель, чтобы дважды проверить проблему и устранить ее. К счастью, ноутбуки со съемными сенсорными экранами при отсоединении переходят в режим планшета, что правильно обрабатывает медиа-запрос.

Вот тестовый сайт, где вы можете протестировать свое собственное устройство, чтобы увидеть, какие из этих медиа-запросов применимы к нему, а также просмотреть некоторые из наиболее популярных настроек устройств. Браузеры на Android имеют некоторые несоответствия, но другие устройства, похоже, разобрались с ними. Проверив эти различные устройства, можно сделать вывод, что таргетинг на ноутбуки возможен с помощью запроса @media (hover: hover) и (pointer: fine) {}. 

  @media (hover: hover) and (указатель: нормально)  {
  nav a: hover  {
 фон: желтый; 
} 
}

Я что-то пропустил? Что вы обычно используете в таких случаях? Я вполне доволен этим решением, но дайте мне знать, если есть лучшее! 🤓

Изображение на обложке — , здесь .

Какой должна быть альтернатива Hover на мобильных устройствах?

Какой должна быть альтернатива Hover на мобильных устройствах? — Обмен стеками пользовательского опыта

Сеть обмена стеков

Сеть Stack Exchange состоит из 176 сообществ вопросов и ответов, включая Stack Overflow, крупнейшее и пользующееся наибольшим доверием онлайн-сообщество, где разработчики могут учиться, делиться своими знаниями и строить свою карьеру.

Посетить Stack Exchange

  2. 0

  3. +0

  6. Авторизоваться
    Зарегистрироваться

User Experience Stack Exchange — это сайт вопросов и ответов для исследователей и экспертов в области пользовательского опыта.Регистрация займет всего минуту.

Зарегистрируйтесь, чтобы присоединиться к этому сообществу

Кто угодно может задать вопрос

Кто угодно может ответить

Лучшие ответы голосуются и поднимаются наверх

Спросил

Просмотрено
3к раз

На этот вопрос уже есть ответы :

Закрыт 8 лет назад.

Возможный дубликат:
Альтернатива iPad / iPhone для состояний наведения
Переосмысление функции «наведения» с учетом сенсорных экранов

У нас есть приложение для внутренней сети, использующее Megflyouts в меню. Поэтому, когда мы наводим курсор на пункт меню, он отображает Megaflyout с рядом параметров навигации и информации. Также при щелчке по пункту меню мы переходим на эту страницу. В мобильном устройстве наведение и щелчок — это в основном одно.Как вы думаете, мы можем перепроектировать одни и те же вещи, чтобы две функции работали независимо и при этом выглядели интуитивно.

задан 27 мая ’12 в 10: 522012-05-27 10:52

сушил бхарванисушил бхарвани

1,14722 золотых знака1010 серебряных знаков1616 бронзовых знаков

2

На рабочем столе открывается наведение, а нажатие активирует; на сенсорном устройстве измените его на касание открывается, а касание снова активирует.Вы можете указать тот факт, что элемент можно щелкнуть при втором касании, используя стандартное оформление текста ссылки (подчеркнуто), когда появляется мегафлайт, как показано ниже:

загрузить исходный код bmml — каркасы, созданные с помощью Balsamiq Mockups

Создан 27 мая ’12 в 11: 072012-05-27 11:07

Мирддин Эмрис

5,7371313 серебряных знаков2727 бронзовых знаков

Не тот ответ, который вы ищете? Просмотрите другие вопросы с метками мобильный наведение или задайте свой вопрос.

User Experience Stack Exchange лучше всего работает с включенным JavaScript

Ваша конфиденциальность

Нажимая «Принять все файлы cookie», вы соглашаетесь с тем, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в ​​отношении файлов cookie.

Принимать все файлы cookie

Настроить параметры

Много веселья с «парящими» CSS-селекторами на мобильных устройствах

Добро пожаловать на сайт разработчика Марио «Я понятия не имею, что делаю».к постам 🙂

Я ни в коем случае не дизайнер или не специалист по CSS, но недавно у меня была причина поработать над некоторым CSS для веб-компонента чат-бота. Он должен был работать как в настольных, так и в мобильных браузерах, и, хотя большинство из них было довольно простым, я обнаружил интересное поведение мобильных браузеров вокруг селектора «зависания» на кнопках.

Вкратце: мобильные браузеры, похоже, применяют стиль «наведения» к кнопкам, у которых есть фокус.

Меня это смутило — большинство мобильных браузеров (как на Android, так и на iOS) применяли стиль «наведения» к кнопке, на которой был фокус.Это было не совсем то, что мне было нужно, поэтому я подумал, что оберну стиль наведения в медиа-запрос, чтобы остановить браузеры, которые не могут навести курсор (т.е. мобильные браузеры) от его использования:

  @media (hover: hover) {

Войти в полноэкранный режимВыйти из полноэкранного режима

Однако это не сработало, поскольку, похоже, большинство мобильных браузеров считают, что могут зависать (при долгом нажатии). Проклятие. Хорошо, попробуем наоборот:

  @media not all and (hover: none) {

Войти в полноэкранный режимВыйти из полноэкранного режима

По-прежнему не повезло по той же причине, что и выше.

Итак, следующее, на что я обратил внимание, — это медиа-запрос «указатель», и, эй, престо, использование «указателя: отлично» работает намного лучше, поскольку мобильные браузеры явно не считают себя обладателями точного указателя. Есть только одна проблема: Firefox не поддерживает это (пока?). Чтобы обойти это, я добавил «-moz-touch-enabled: 0», поэтому в итоге получил этот медиа-запрос:

  @media (-moz-touch-enabled: 0), (указатель: нормально) {

Войти в полноэкранный режимВыйти из полноэкранного режима

Наконец-то это сработало отлично, за одним исключением: эффект «зависания» теперь не срабатывает в Firefox на ноутбуках с сенсорным экраном.Я думаю, что я (или, скорее, клиент) могу смириться с этим, поскольку, по крайней мере, это означает, что кнопки теперь отображаются должным образом во всех мобильных браузерах и во всех браузерах для настольных компьютеров, кроме комбинации «Firefox + сенсорный экран».

Делимся этим в надежде, что это может помочь кому-то в будущем, но в равной степени — я ни в коем случае не эксперт по CSS, и, как я уже сказал, «решение» на самом деле не идеальное решение в любом случае — если кто-нибудь прочитает это и качают головой из-за моей некомпетентности, пожалуйста, дайте мне знать о лучших решениях в комментариях!

3 Альтернативы эффектам наведения на мобильных устройствах

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

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

  1. Удалить их полностью и заменить их основным действием.
  2. Добавьте дополнительное меню, где вы можете нажать один раз для эффекта наведения и еще раз для основного действия.
  3. Разместите информацию о наведении на отдельной странице.

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

Удалите эффекты наведения из вашего дизайна

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

Вы можете сохранить действие меню в качестве основного действия и включить дополнительную информацию в другом месте страницы. Вы можете использовать всплывающие окна, всплывающие окна, увеличивать содержание дескриптора для точки, которую вы пытаетесь донести, или что-то еще. Если у вас нет навыков для реализации jQuery, это, вероятно, самый простой вариант.

Добавить вторичное меню

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

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

Поместить информацию о наведении на отдельной странице

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

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

Оставаться с зависанием

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

Одна из самых простых ловушек, в которую можно попасть, когда вы начинаете самостоятельно или создаете свой первый веб-сайт, — это проектировать для себя, а не для своей аудитории. Вы, безусловно, должны создать что-то, что вам нравится, но, рассматривая удобство использования, вы должны расставить приоритеты для аудитории. Вы также должны принять во внимание устройства, которые они будут использовать, и то, как они, скорее всего, будут лучше всего взаимодействовать с вашим сайтом.

Если ваша аудитория молода, они будут использовать мобильные устройства.Если они используют мобильные устройства, эффекты наведения и другие варианты дизайна — не лучший вариант.

Наконец, единственное решение CSS для: наведения курсора на сенсорные экраны

Были проблемы с
: hover псевдокласс с тех пор, как первый веб-браузер был установлен на устройстве с сенсорным экраном. Конечно, были решения, но ни одного не было.
решение . С новыми медиа-запросами уровня 4 эта проблема, похоже, решена навсегда.

«Эээ… В чем проблема?»

Допустим, вы просто добавили стиль : hover к элементу своей веб-страницы, чтобы он получал некоторый стиль при наведении курсора мыши на него.Легкий.

При наведении курсора на рабочий стол. Источник: https://proper-hovering.glitch.me

Проблема возникает, когда пользователь взаимодействует с этим элементом на сенсорном экране: после того, как нажатие произошло, эффект зависания остается на элементе. Это также происходит, когда элемент даже не активируется касанием, например, если к нему прикоснулись во время прокрутки.

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

Однако становится еще хуже: после того, как перетаскивание прекратилось, эффект зависания остается активным!

Парение на сенсорном экране (эмулировано). Источник: https://proper-hovering.glitch.me

Это определенно запутает некоторых из ваших пользователей, а это никогда не бывает хорошо. Что-то нужно делать.

«Решение уже должно быть…»

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

  body.nontouch nav a: hover {
    фон: желтый;
}

С самого начала было несколько проблем:

  1. Разработчик может создать сценарий обнаружения, который хорошо работает сегодня, но как насчет двух месяцев, когда появится какая-нибудь новая технология? Ноутбуки с сенсорными экранами? Съемные сенсорные экраны? Apple Pencil? Я бы не стал беспокоиться об этом во время разработки.
  2. Можно было бы подумать, что у сообщества JS есть готовый и вооруженный пакет только для этой проблемы, но это не так.
  3. При использовании компонентного JS-фреймворка с инкапсулированными стилями это решение просто бросает вызов. Каждый раз, когда используются эффекты наведения, стили этого компонента должны ссылаться на этот глобальный класс. Неудобно.
  4. Не два проекта, в которых используется это решение, будут одинаковыми. Может быть, одно хорошо работает на специальном устройстве, а другое — нет.Должен быть стандартизированный способ решения этой проблемы.

Введите медиа-запросы уровня 4

Медиа-запросы прекрасны. Они единолично создали адаптивный веб-дизайн и являются краеугольным камнем современной веб-разработки, ориентированной на мобильные устройства. В качестве отличной инициативы W3C добавил Interaction Media Features в качестве кандидата в рекомендации для L4 Media Queries, которые мы можем использовать для различения устройств с сенсорным экраном.

Включены четыре медиа-запроса: наведение, любое наведение, указатель и любой указатель.Они предоставляют информацию о возможности зависания и типе пользовательского ввода. Информация может относиться только к первичному вводу или к любому доступному вводу. Например, @media (hover: hover) будет истинным, если основной ввод может зависать (например, курсор мыши), и @media (any-pointer: coarse) будет истинным, если какой-либо ввод имеет ограниченную точность. (например, сенсорный ввод). Эти мультимедийные функции предоставляют достаточно информации для правильной обработки : hover .

Одна из проблем заключается в том, что на данный момент эти запросы являются всего лишь кандидатом на рекомендацию, а это означает, что они могут быть изменены или даже удалены в любое время.Помните об этом при работе с ними и решите, работает ли это для вашего проекта. В настоящий момент это определенно работает для нас, и мы возлагаем большие надежды на эти спецификации. Тот факт, что все основные браузеры реализовали эти запросы (за исключением, конечно, IE), делает нас еще более оптимистичными в отношении будущего.

«Итак, что именно мне делать?»

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

С точки зрения UX, мы ищем решение, которое будет наименее запутанным и наиболее приятным для пользователя.

Это означает отсутствие эффектов наведения на устройствах с сенсорным экраном и их использование повсюду. Особым случаем здесь являются ноутбуки с сенсорными экранами, но мы можем ожидать, что мышь / тачпад используется большую часть времени. Даже если есть эффект зависания при наведении курсора, пользователь может легко использовать мышь / сенсорную панель, чтобы дважды проверить проблему и устранить ее. К счастью, ноутбуки со съемными сенсорными экранами при отсоединении переходят в режим планшета, что правильно обрабатывает медиа-запрос.

Это тестовый сайт, на котором вы можете протестировать свое собственное устройство, чтобы увидеть, какие из этих медиа-запросов применимы к нему, а также просмотреть некоторые из наиболее популярных настроек устройств.Браузеры на Android имеют некоторые несоответствия, но другие устройства, похоже, разобрались с ними. При проверке этих различных устройств можно сделать вывод, что таргетинг на ноутбуки возможен с помощью запроса @media (hover: hover) and (pointer: fine) {}. 

  @media (hover: hover) and (pointer: fine) {
    nav a: hover {
        фон: желтый;
    }
}

Я что-то пропустил? Что вы обычно используете в таких случаях? Я вполне доволен этим решением, но дайте мне знать, если есть лучшее!

Медиа-запрос при наведении курсора может помочь удалить стили наведения на сенсорных устройствах (но может включать ложные срабатывания)

Этот пост является частью моей серии «Сегодня я узнал», в которой я делюсь всеми своими знаниями о веб-разработке.

Пожалуйста, прочтите статью до конца … она была отредактирована, и это не так просто, как я думал.

Сегодня я подписался на интересную ветку в Твиттере. Крис Койер спросил о вариантах использования правила @supports в CSS. В одном из ответов рассказывалось о способе отключения «зависания при наведении курсора» элементов, на которые можно сфокусироваться.

Боковое примечание: он не использовал @supports , а скорее медиа-запрос, чтобы определить, есть ли у пользовательского агента механизм поддержки наведения.Но послушайте … 🤷‍♂️

Если вы регулярно пользуетесь своим мобильным устройством для просмотра веб-страниц, возможно, вы понимаете, о чем я говорю. Когда вы нажимаете кнопку, она остается в состоянии эмуляции наведения курсора до тех пор, пока другие элементы не получат фокус. Браузеры реализовали это таким образом, чтобы дать пользователям возможность достичь состояния наведения.

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

Если вы хотите избавиться от состояний наведения на сенсорных устройствах, вы можете использовать медиа-функцию hover CSS.

  @media (hover: hover) {
  a: hover {
    фон: красный;
    цвет белый;
  }
}

Лично стили наведения не особо беспокоят, но я могу представить, что некоторых это раздражает. Используя этот медиа-запрос, вы можете избавиться от липкого состояния при наведении курсора. 🎉

Я быстро установил CodePen (www.my-links.online/hover-states/), если вы хотите попробовать его на своем мобильном телефоне.

Отредактировано: Патрик Х. Лауке сделал несколько очень ценных комментариев.

В общем, не пытайтесь «обнаруживать» сенсорные устройства. дизайн, поэтому он работает с сенсорным экраном / мышью / стилусом / клавиатурой.

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

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