CSS: наведите курсор на мобильное или другое устройство в качестве переключателя

Ответ 1

Ваш вопрос не совсем ясен, и я не понимаю, спрашиваете ли вы: "Могу ли я использовать :hover для всех устройств?" или "Будет ли :hover вести себя одинаково на всех устройствах?" или "Является ли :hover стандартным элементом в Интернете?"

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

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

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

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

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

5.11.3 Динамические псевдоклассы:: hover,: active и: focus http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes

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

Чтобы разобраться в этом вопросе, прочитайте следующую спецификацию для Safari Mobile:

Кроме того, Safari для пользователей iOS взаимодействует с вашим веб-контентом прямо пальцами, а не с помощью мыши. Это создает новые возможности для сенсорных интерфейсов, но не работает хорошо с зависающими состояниями. Например, указатель мыши может нависнуть над элемент веб-страницы и инициировать событие; палец на экране Multi-Touch не может. По этой причине события мыши эмулируются в Safari на iOS. В результате элементы, которые полагаются только на mousemove, mouseover, mouseout или псевдокласс класса CSS: зависание может не всегда вести себя так, как ожидалось, на сенсорным экраном, таким как iPad или iPhone.

Вы можете обрабатывать штрихи напрямую или даже обнаруживать продвинутые жесты в Safari на iOS, используя сенсорный экран событий DOM Touch, touchmove, touchhend и touchcancel. В отличие от событий мыши, которые эмулируются, DOM Сенсорные события специально разработаны для работы с сенсорными интерфейсами, поэтому их поведение является надежным и ожидаемым.

5. Подготовьтесь к сенсорному интерфейсу https://developer.apple.com/library/content/technotes/tn2010/tn2262/_index.html

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

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

• Неинтерактивные устройства не должны поддерживать :hover
• Интерактивные устройства могут поддерживать псевдокласс (но он не является обязательным, и они могут игнорировать его, например, экранные устройства или экраны Брайля).
• Apple touch устройства в отсутствие указателя эмулирует :hover
• Можно с уверенностью предположить, что текущие сенсорные устройства также эмулируют :hover
• Можно с уверенностью предположить, что любой другой браузер/устройство не обязательно должен поддерживать :hover в зависимости от их интерфейса.
• Скорее всего, последние браузеры будут поддерживать :hover, потому что это визуальное средство для пользователя.

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

"Является ли :hover стандартным элементом в Интернете?"

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

"Можно ли использовать :hover для всех устройств?"

Да, вы можете возможно. Устройства, которые не поддерживают: зависают, скорее всего, устройства/пользователи, которые, вероятно, не являются вашей главной целью. Лучше спросите себя: "Кто станет конечным пользователем моего продукта?" если они только мобильные пользователи или только слепые люди или только люди, которые любят просматривать с помощью Nintendo DS, тогда не используют события :hover, в противном случае.

"Будет ли :hover вести себя одинаково на всех устройствах?"

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

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

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

Ответ 2

Наведение курсора над элементом веб-страницы является обычным действием при просмотре с помощью мыши и клавиатуры, но нет эквивалента, когда речь заходит о сенсорном просмотре. В этом разделе показано, как использовать свойство aria-haspopup Document Object Model (DOM) для моделирования наведения на устройства с сенсорным экраном с помощью Internet Explorer 10 в Windows 8.

Это поведение неприменимо к Internet Explorer 10 в Windows 7 (которое не поддерживает моделирование наведения с помощью aria-haspopup) или Internet Explorer 11 в Windows 8.1 (с поддержкой встроенного сенсорного наведения).

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

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

Ответ 3

Мне кажется, что часть этого вопроса еще не получила ответа, а именно, каково фактическое поведение телефонов Windows в отношении "зависания" . Чтобы уточнить:

Рассмотрим веб-страницу, написанную для использования на рабочем столе/мыши, в которой есть разметка css, так что "hover" изменяет стиль, применяемый к объекту. Если вы просматриваете эту страницу на iPhone или Android и нажимаете на объект, возникает изменение стиля. (т.е. он ведет себя так, как если бы объект имел обработчик события onClick(), чтобы изменить стиль). Случается ли то же самое на Windows Phone?

Я могу ответить на этот вопрос, по крайней мере, для Nokia Lumia 630 под управлением Win 8.1:

Нет. Когда вы нажимаете пальцем в начальной части касания, происходит изменение стиля, но когда вы отпускаете палец в конце касания, стиль возвращается к оригиналу. (Это, возможно, более правильная интерпретация "зависания" для прикосновения, хотя вопрос о практическом использовании - это другое дело.)

Я бы добавил, что интерпретация Hover iPhone/Safari также имеет состояние "выключено". Это срабатывает при нажатии на другой объект.

Чтобы показать это и разрешить тестирование на разных устройствах/браузерах, я создал демонстрационную страницу в www.davidleader.net/mobiledemo.html. Это реализует onClick(), onMouseover() и: hover, чтобы изменить непрозрачность изображения, показывая другой под ним. (Следовательно, это зависит от поддержки непрозрачности, но это было какое-то время.) Также есть "немой графикой", чтобы продемонстрировать конец наведения на iPhone.

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

Ответ 4

В настоящий момент нет никого, у кого есть хорошая поддержка: состояние hover в мобильном

См. соответствующий вопрос об этом

Я не использую Modernzr.js для мобильных устройств, но он говорит, что он может определить, поддерживает ли браузер сенсорные события, поэтому в основном он добавляет класс .touch в тег html, если пользователь использует мобильное устройство.

поэтому вы будете использовать его так, например,

.touch a:active{ /*css code here */ }

надеюсь, это поможет как-то

Ответ 5

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

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

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

Это только моя личная философия, для чего она стоит.