Hover на мобильных устройствах: Возможен ли аналог :hover в html/css/js на мобильных устройствах? — Хабр Q&A

Зависает :hover при нажатии на моб. устройствах

Всем привет! Подскажите как можно исправить эффект закисания :hover на устройствах с тач скрином? На десктопах все работает идеально, т.е навожу мышку появляется нужный цвет у кнопки убираю мышку цвет становиться по умолчанию, но на мобилках если нажать кнопку идет зависание цвета hover. (Как это вообще реализовывают? Или ни кто с этим не парится и все отключают этот эффект на мобильных через @media?)

.to-up {
  position: fixed; /* фиксированная позиция */
  color: #fff; /* цвет текста */
  background-color: #3aa111; /* цвет заднего фона */
  right:  5px; /* расстояние от правого края */
  bottom: 80px; /* расстояние от нижнего края */
  padding: 13px 13px; /* отступы до содержимого блока */
  border-radius: 100%; 
  cursor: pointer; /* форма курсора */
  display: none; /* не отображать элемент */
  text-align: center; /*выравнивание содержимого элемента по центру */
}
div.  to-up:hover {
  background-color: orange; /* цвет заднего фона при наведении */
}

Спасибо!)

Популярное

1. Bootstrap 3 — Navbar (горизонтальное меню) 365.7K 2. Модальное окно Bootstrap для сайта 363.8K 3. Маска ввода для HTML элемента input 346.6K 4. Слайдер для сайта на чистом CSS и JavaScript 338.8K 5. Форма обратной связи для сайта с отправкой на почту 312.3K 6. CSS медиа-запросы (media queries) 304.8K 7. Bootstrap — Carousel (карусель) 292.7K

Последние комментарии

При использовании структуры bootstrap 5 почему-то код не работает вовсе. Не могли бы вы подсказать как это исправить?

Доброе утро, заметил, что process.php есть только в https://github.com/itchief/feedback-form-in-modal в папке «process». В форме, которую зд…

Подумал, зачем ловить клик по ссылке, а почему-бы не ловить событие перезагрузки страницы? вместо клика по ссылке $(document).on(’…

Добрый день. Скорее всего просто на вашем экране низкая плотность пикселей или PPI, поэтому изображение и не чёткое.

Добрый день! Если правильно понял задание, то так: https://codepen.io/itchief/pen/abaeXRq

Посмотрите что сервер отдаёт. А также какие ошибки имеются в консоли браузера.

Добрый день! После скрытия элемента он удаляется из HTML для этого в коде используется метод remove().

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

Да, большое спасибо.

Здравствуйте! Спасибо, добавил уточнения для Math.random().

Опрос

Используете ли Вы JavaScript-фреймворки (библиотеки)? Если да, то какой наиболее часто?

Да, React

Да, Vue. js

Да, jQuery

Да, другой

Не использую, в основном пишу код JavaScript без использования библиотек

История просмотров

Email-рассылка

Не пропустите свежие статьи и уроки, подпишитесь на информационную рассылку «itchief.ru». Отправка писем на почту раз в неделю!

Подписаться

Решение проблемы с CSS :hover. Поговорим о псевдоклассе :hover… | by Саша Азарова | NOP::Nuances of Programming

.hummingbird:hover {}

:hover — псевдокласс, определяющий стиль элемента при наведении на него указателя.

Проблемы с псевдоклассом :hover начались еще с тех пор, как на сенсорных устройствах был установлен первый браузер. Конечно, проблемы пытались решить и решали, но полноценным решением это вряд ли можно было назвать. Однако с новыми медиазапросами (Media Queries) 4 уровня проблема, кажется, решена окончательно.

“Хм … а в чем, собственно говоря, заключается проблема?”

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

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

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

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

Подобное поведение элементов может запутать пользователя и подобная практика будет отрицательно сказываться на вашем продукте. Эту проблему необходимо как-то решить.

“Не может же быть, чтобы эту проблему не пытались как-то решить…”

Да, определенные решения выдвигались. Лучшим из них было использование JavaScript для определения наличия сенсорного экрана и последующее применение класса к body . После чего, добавляя к какому-либо элементу псевдокласс :hover, будет происходить явное обращение к этому классу.

body.nontouch nav a:hover {
background: yellow;
}

Однако подобное решение имеет несколько недостатков:

1. Разработчик может создать JS-сценарий обнаружения, который работает сегодня, но что с ним будет через пару месяцев, когда появится какая-то новая технология? Ноутбуки с сенсорными экранами? Съемные сенсорные экраны? Apple Pencil? Никто не хотел бы беспокоиться об этом во время разработки.
2. Использование основанного на компонентах JS-фреймворка с инкапсулированными стилями неудобно. Так как каждый раз, когда активируется :hover, стили этого элемента должны ссылаться на этот глобальный класс.
3. Это решение может работать по-разному на разных устройствах. Возможно, что для специальных устройств придется придумывать специальное решение. Однако должен быть стандартизированный способ, работающий на всех устройствах.

Media Queries Level 4

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

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

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

«Так что же делать?»

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

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

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

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

Перевод статьи Mezo Istvan: Finally, a CSS only solution to :hover on touchscreens

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

спросил 13 лет, 1 месяц назад

Изменено 1 год, 11 месяцев назад

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

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

• css
• мобильный
• наведение

1

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

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

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

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

4

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

Дополнительная информация здесь: http://designshack.net/articles/css/are-hover-events-extinct/

4

Что автор вопроса имеет в виду под «Работает ли CSS hover на мобильных устройствах?»?

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

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

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

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

0

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

2

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

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

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

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

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

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

Да, есть. если не верите, попробуйте. i) Напишите Hover Css на Codepen или другом стеке, в котором у вас была учетная запись. ii) Сохраните свою работу. [это легко увидеть, если вы добавите ‘border-bottom: 1px dotted black’] iii) Откройте его на своем мобильном телефоне, планшете или на том, что вы хотите доказать. [которое сохранит ваша ручка, разумейте CodePen]

В результате вы получите ответ. Не слишком верьте теории, просто практикуйте и доказывайте ее.

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

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

У

Mobile нет ховера, чувак!.

Идеи, как справиться с отсутствием наведения | Синтия Антунес

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

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

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

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

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

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

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

Ниже я перечисляю наиболее распространенные решения, которые я использовал:

На рабочем столе очень часто можно увидеть наведение на кнопки, и на самом деле, когда наведения нет, мы можем подумать: «Это кликабельно?».

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

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

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

Простая кнопка с активным эффектом

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

Источник: Чистый CSS Ripple с минимальными усилиями

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

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

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

Наведение с анимацией триггера для фильтрации методов при нажатии. С сайта rounddesignguide.com/methods.

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

Таким образом, веб-сайт Circular Design Guide создал для него другой подход к мобильному экрану, используя элементы, гораздо более «осязаемые» визуально.

Страница методов на сайте circledesignguide.com/methods в мобильной версии.

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

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

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

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

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

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

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

Скриншот кассы электронной коммерции American Eagle

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

Скриншот кассы электронной коммерции American Eagle с предложением улучшение

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

Переключаемое меню электронной коммерции American Eagle

Складное меню — это решение для небольших устройств.

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

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

В некоторых интернет-магазинах кнопка «Добавить в корзину» отображается при наведении курсора и сохраняется для мобильных устройств.

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

Знаменитая тема Avada WordPress. Демонстрация диетолога. PS: Это не лучший способ показать CTA «Добавить в корзину», но я не буду сейчас вдаваться в эту тему. Этот пример работает для того, что необходимо объяснить в этом случае.

Но при переносе этого эффекта на мобилу не работает.

Скриншот темы Avada WordPress в мобильной версии. Демонстрация диетолога.

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

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

1- Показать CTA и любые другие функции, такие как «Сравнить», если они существуют, фиксированные на странице под названием продукта и ценой.

2- Или не показывать CTA в списке продуктов и рассчитывать на то, что пользователь коснется изображения продукта, чтобы перейти к PDP, поскольку это обычное поведение. Там они будут взаимодействовать в соответствии со своими потребностями.

В последнее время ни один веб-проект не обходится без сенсорных устройств.

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

Создано автором

Или слишком похож на этот, текст, который накладывается на картинку при наведении.