Псевдокласс hover CSS решение проблем с эффектом наведения на сенсорных устройствах

Содержание материала:

Не срабатывает псевдокласс :hover !

20.02.2020, 22:28

Псевдокласс hover
Доброго времени суток! Есть два класса(main,subclass), мне нужно что бы при наведении на main.

Псевдокласс :hover
Надо изменить атрибуты одного div’a при наведение на другой. Написал так: .

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

Псевдокласс :hover и картинка с заменой
Добрый вечер всем пользователям прочитавшие данное сообщение! Проблема в том, что при добавление.

HTML CSS псевдокласс hover
Ребят, недавно занялся версткой сайта, опыта до этого не было! столкнулся со следующей задачей: на.

Есть ли противоположный CSS псевдокласс для: hover?

Есть ли псевдокласс в CSS, чтобы указать

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

Я просмотрел несколько ссылок CSS3, и я не вижу упоминания псевдо-класса CSS, чтобы указать противоположность: hover.

Да, используйте :not(:hover)

Другой пример; Я думаю, вы хотите: «когда кто-то завис, тускнет все остальные элементы».

Если мое предположение верно и предполагается, что все ваши селекторы находятся внутри одного и того же родителя:

В противном случае. просто используйте логику по умолчанию:

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

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

Аргумент о том, что такой псевдокласс был бы менее затратным с точки зрения затрат, довольно слаб. Самая наивная реализация такого псевдокласса была бы буквальной проверкой :not(:hover) , которая была бы не лучше. Любые более сложные или оптимизированные реализации, и вы просите продавцов внедрить псевдокласс, который является либо быстрым, либо даже быстрее, чем :not(:hover) , что-то, что уже достаточно необычно для использования, учитывая другие параметры, которые у вас есть, такие как каскадные и :not(:hover) (для всякий раз, когда каскадирование не является вариантом), к которому у вас есть доступ. Это просто не оправдывает время и усилия по спецификации, внедрению и тестированию альтернативы по крайней мере одному другому существующему методу, который на 100% функционально эквивалентен (и относится к по меньшей мере 80% сценариев). И там также вопрос о названии такого псевдокласса — вы не предложили его имя, и я тоже не могу думать о хорошем. :not-hover сокращается только на два байта и лишь незначительно меньше работает для ввода. Во всяком случае, это потенциально более запутанно, чем :not(:hover) .

Если вы обеспокоены спецификой, обратите внимание, что псевдоклассы :not() не учитываются для специфичности; только его наиболее конкретный аргумент -. :not(:hover) и :hover одинаково специфичны. Поэтому специфика также не является проблемой.

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

Обратите внимание, что это не то же самое, что следующий вопрос, который говорит о событиях против состояний (изначально о :focus , а не :hover , но применяется тот же принцип): Имеет ли CSS: селектор размытия (псевдокласс)?

CSS hover не игнорируется на устройствах с сенсорным экраном

Я добавил div с помощью кнопки html:

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

есть ли способ игнорировать свойство hover при просмотре с помощью устройства с сенсорным экраном?

5 ответов

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

Если вы используете modernizr вы можете применить: наведите psuedos через .класс no-touch, который применяется к тегу html.

не идеальное решение, но спасибо @dualed за headstart!

вы можете указать тип носителя в правилах CSS.

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

(кстати. это CSS не jQuery)

возможно, это не то, что вы хотите, но вы можете указать разные таблицы стилей css в зависимости от носителя:

в приведенном выше примере main.css будет использоваться для экранов компьютеров, но для устройства handeld это будет smallscreen.в CSS

один хороший и простой способ заключается в использовании Modernizr.

при запуске Modernizr он добавит запись в атрибут class HTML тег для каждой функции, которую он обнаруживает, префикс функции с no-if браузера не поддерживает.

теперь добавьте следующие строки в таблицу стилей css

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

Состояния ссылок в CSS. Псевдоклассы

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

Какими бывают состояния ссылок

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

Топ-пост этого месяца:  Удаление вредоносного ПО не гарантирует восстановления позиций в Яндексе

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

  • :hover — ссылка, на которую наведен курсор;
  • :active — активная ссылка (та, по которой совершается клик, или на которой удерживается кнопка мыши);
  • :link — ссылка, еще не посещенная пользователем;
  • :visited — посещенная ссылка.

Для справки: из соображений безопасности набор стилей, которые можно использовать для ссылок :visited , ограничен. Посещенные ссылки принимают только свойства color , background-color , border-color (и его производные), column-rule-color , outline-color . При этом свойство к посещенной ссылке можно применить, только если это же свойство задано и для обычной. Прозрачность цвета, установленная через альфа-канал для элемента :visited , будет проигнорирована. JavaScript-метод getComputedStyle всегда возвращает значение цвета непосещенных ссылок, даже если у посещенных ссылок цвет иной.

Стилизация состояний

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

Псевдокласс :active также поддается гибкой стилизации:

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

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

Выбор ссылок с помощью селекторов

Как записать селектор с псевдоклассом для определенной группы ссылок? Например, если вам нужно применить какой-то стиль для всех ссылок навигационного меню с идентификатором #main-menu , когда такая ссылка находится в состоянии наведенного на нее курсора, вы можете использовать такой селектор:

Либо, если у каждой ссылки этого меню дополнительно имеется свой класс (допустим, это .menu-link ), то такая запись тоже подойдет:

Чтобы определить стили для всех состояний данных ссылок, запишите для каждого псевдокласса отдельное правило:

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

Как убрать / проигнорировать: стиль hover css на сенсорных устройствах

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

Итак, (как) я могу удалить / игнорировать все объявления CSS :hover сразу (без необходимости знать каждое) для сенсорных устройств после их объявления?

11 ответов

Есть несколько решений этой проблемы.

Quick’n’dirty — удалить: парить стили, используя JS

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

Ограничения: таблицы стилей должны размещаться в одном и том же домене (это означает, что нет CDN). Отключает зависания на смешанных мышах и сенсорных устройствах, таких как Surface, что вредит UX.

Только для CSS — используйте медиазапросы

Поместите все свои правила: hover в блок @media :

или, альтернативно, переопределите все ваши правила наведения (совместимые со старыми браузерами):

Ограничения: работает только на iOS 9.0+, Chrome для Android или Android 5.0+ при использовании WebView. hover: hover отключает эффекты hover в старых браузерах, hover: none требует переопределения всех ранее определенных правил CSS. Оба несовместимы со смешанными мышью и сенсорными устройствами .

Самый надежный — используйте специальный класс CSS и обнаруживайте касание с помощью JS

Этот метод требует добавления всех правил наведения с помощью body.hasHover . (или имя класса по вашему выбору)

Класс hasHover может быть добавлен с использованием hasTouch() из первого примера:

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

Это должно работать в основном в любом браузере и включать / отключать стили при наведении. Попробуйте это здесь: https://jsfiddle.net/dkz17jc5/19/

Поскольку это не было затронуто некоторое время, вы можете использовать:

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

Я имею дело с подобной проблемой в настоящее время.

У меня сразу возникает два основных варианта: (1) проверка пользовательских строк или (2) ведение отдельных мобильных страниц с использованием другого URL-адреса и предоставление пользователям выбора того, что лучше для них.

  1. Если вы можете использовать язык интернет-клейкой ленты, такой как PHP или Ruby, вы можете проверить пользовательскую строку устройства, запрашивающего страницу, и просто передать тот же контент, но с помощью
  2. вместо нормального стиля.

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

О. Если вам разрешено игнорировать старые браузеры , вам просто нужно добавить одно правило в обычный немобильный CSS, а именно: РЕДАКТИРОВАТЬ : Erk. Проведя некоторые эксперименты, я обнаружил, что приведенное ниже правило также отключает возможность переходить по ссылкам в webkit-браузерах, в дополнение к простому отключению эстетических эффектов — см. Http://jsfiddle.net/3nkcdeao/
Таким образом, вам придется быть более избирательным в отношении того, как вы изменяете правила для мобильного случая, чем то, что я покажу здесь, но это может быть полезной отправной точкой:

В качестве идентификатора, отключение событий указателя на родительском элементе и затем явное включение их на дочернем элементе в настоящее время приводит к тому, что любые эффекты наведения на родительский элемент снова становятся активными, если дочерний элемент вводит :hover .
Смотрите http://jsfiddle.net/38Lookhp/5/

Б. Если вы поддерживаете устаревшие веб-рендереры, вам придется проделать немного больше работы, удаляя любые правила, которые устанавливают специальные стили во время :hover . Чтобы сэкономить время, вам может понадобиться создать команду автоматического копирования + копирования, которую вы запускаете в своих стандартных таблицах стилей для создания мобильных версий. Это позволит вам просто написать / обновить стандартный код и удалить все правила стиля, которые используют :hover для мобильной версии ваших страниц.

  1. (I) В качестве альтернативы просто сообщите своим пользователям, что у вас есть m.website.com для мобильных устройств в дополнение к вашему website.com . Хотя субдоминирование является наиболее распространенным способом, вы можете также иметь некоторые другие предсказуемые модификации данного URL, чтобы позволить мобильным пользователям получать доступ к измененным страницам. На этом этапе вы должны быть уверены, что им не нужно изменять URL-адрес каждый раз, когда они переходят на другую часть сайта.
Топ-пост этого месяца:  Какие должны быть отзывы на сайте

Опять же, здесь вы можете просто добавить дополнительное правило или два к таблицам стилей или сделать что-то более сложное, используя sed или аналогичную утилиту. Вероятно, было бы проще всего применить: не к вашим правилам стиля, таким как div:not(.disruptive):hover <. где вы добавили бы к элементам, которые раздражают мобильных пользователей, использующих js или язык сервера вместо того, чтобы манипулировать CSS.

(II) Вы можете на самом деле объединить первые два и (если вы подозреваете, что пользователь перешел на неверную версию страницы), вы можете предложить им переключаться на / из дисплея мобильного типа или просто иметь ссылку где-нибудь, что позволяет пользователям шлепаться взад и вперед. Как уже говорилось, запросы @media также могут быть полезны при определении того, что используется для посещения.

(III) Если вы готовы к решению jQuery, когда вы знаете, какие устройства являются «сенсорными», а какие нет, то вам может оказаться полезным игнорирование наведения мыши на устройствах с сенсорным экраном .

Псевдокласс :hover

Определяет стиль элемента при наведении на него курсора мыши, но при этом элемент еще не активирован, иными словами кнопка мыши не нажата.

Синтаксис ?

Обозначения

Описание Пример
Указывает тип значения.
A && B Значения должны выводиться в указанном порядке. &&
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [, ]*
+ Повторять один или больше раз. +
? Указанный тип, слово или группа не является обязательным. inset?
Повторять не менее A, но не более B раз.
# Повторять один или больше раз через запятую. #

×

Пример

В данном примере псевдокласс :hover применяется к ссылке (элементу ), при этом меняется цвет ссылки и фона под ней.

В данном примере псевдокласс :hover добавляется к элементу списка (
) для создания двухуровневого меню.

Примечание

В браузере Internet Explorer до версии 7 псевдокласс :hover работает только для ссылок.

Спецификация ?

Спецификация Статус
Selectors Level 4 Рабочий проект
Selectors Level 3 Рекомендация
CSS Level 2 (Revision 1) Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Cand >Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

×

Браузеры ?

4 7 12 1 4 2 1

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузера, начиная с которой свойство поддерживается.

Псевдокласс hover

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

Можно так же сделать всплывающие подсказки на CSS, с использованием того же псевдокласса hover. В своих материалах на тему CSS, много где упоминается про этот псевдокласс, но давайте все же разберем небольшой и самый простой пример. За пример возьмем тег «а». Пишем обычный линк без применения к нему каких-либо свойств. Браузер будет использовать свои собственные стили.

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

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

10 простых эффектов при наведении без плагинов.

Приветствую вас, дорогие друзья!

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

Навигация по статье:

1. CSS-эффект появления тени при наведении

Начнем с самого простого эффекта – это эффект появления тени при наведении.

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

  1. 1. Прежде всего, мы открываем страницу или запись или виджет, или файл темы, где у вас расположен этот элемент.
  2. 2. Далее нам нужно будет присвоить ему класс с названием hover-effect1. В моём примере он присвоен для кнопки и для изображения.

Кстати, в WordPress, для того, что бы присвоить CSS-класс изображению не нужно переходить на вкладку «Текст», а можно просто кликнуть по изображению на вкладке «Визуально», далее кликнуть по значку карандашика.

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

Либо же можно перейти в раздел «Внешний вид» => «Редактор». Здесь у нас обычно файл стилей открыт сразу же по умолчанию. Но на всякий случай убедитесь, что у вас в заголовке над рабочей областью написано «Таблица стилей (style.css)».

После чего нажать на кнопку «Обновить файл» внизу страницы

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

box-shadow – данное CSS свойство отвечает за добавление тени. Более подробно об особенностях этого свойства и значении его параметров я писала в этой статье.

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

Так же, для того, что бы эта тень у нас не только появлялась, но и исчезала плавно, нам необходимо свойство transition для самого класса hover-effect1

Так же для этой тени вы можете изменять смещение, уровень размытия, цвет и т.д. Более подробно об этом у меня было отдельное видео и отдельная статья, с которой вы можете ознакомиться по этой ссылке: Как сделать тень картинки в CSS?

Есть ли противоположный CSS псевдокласс для: hover?

Есть ли псевдокласс в CSS, чтобы указать

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

Я просмотрел несколько ссылок CSS3, и я не вижу упоминания псевдо-класса CSS, чтобы указать противоположность: hover.

Да, используйте :not(:hover)

Другой пример; Я думаю, вы хотите: «когда кто-то завис, тускнет все остальные элементы».

Если мое предположение верно и предполагается, что все ваши селекторы находятся внутри одного и того же родителя:

В противном случае. просто используйте логику по умолчанию:

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

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

Аргумент о том, что такой псевдокласс был бы менее затратным с точки зрения затрат, довольно слаб. Самая наивная реализация такого псевдокласса была бы буквальной проверкой :not(:hover) , которая была бы не лучше. Любые более сложные или оптимизированные реализации, и вы просите продавцов внедрить псевдокласс, который является либо быстрым, либо даже быстрее, чем :not(:hover) , что-то, что уже достаточно необычно для использования, учитывая другие параметры, которые у вас есть, такие как каскадные и :not(:hover) (для всякий раз, когда каскадирование не является вариантом), к которому у вас есть доступ. Это просто не оправдывает время и усилия по спецификации, внедрению и тестированию альтернативы по крайней мере одному другому существующему методу, который на 100% функционально эквивалентен (и относится к по меньшей мере 80% сценариев). И там также вопрос о названии такого псевдокласса — вы не предложили его имя, и я тоже не могу думать о хорошем. :not-hover сокращается только на два байта и лишь незначительно меньше работает для ввода. Во всяком случае, это потенциально более запутанно, чем :not(:hover) .

Если вы обеспокоены спецификой, обратите внимание, что псевдоклассы :not() не учитываются для специфичности; только его наиболее конкретный аргумент -. :not(:hover) и :hover одинаково специфичны. Поэтому специфика также не является проблемой.

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

Обратите внимание, что это не то же самое, что следующий вопрос, который говорит о событиях против состояний (изначально о :focus , а не :hover , но применяется тот же принцип): Имеет ли CSS: селектор размытия (псевдокласс)?

html — CSS: поведение наведения на сенсорных устройствах

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

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

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

  • Есть ли способ убедиться, что компонент выпадающего списка на основе зависания будет работать на всех устройствах?
  • Существуют ли псевдоклассы или свойства, которые я могу использовать, которые могут быть специфичны для браузера или что-то подобное, чтобы убедиться, что большинство устройств охвачены?
  • Есть ли документация о работе с сенсорным экраном, мобильным устройством или мобильным браузером и как они обрабатывают события наведения?
    2 1
  • 30 апр 2020 2020-04-30 08:15:13
  • Angelos Chalaris

1 ответ

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

Под «выпадающим списком на основе зависания» вы подразумеваете тот, который будет отображаться до тех пор, пока пользователь коснется его пальца? Как мобильный пользователь, я не могу представить, что это успешный UX

Все псевдоклассы здесь https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes. Я бы рассмотрел «интерактивные» :active :checked :focus :hover . Проблема с :hover — это, как вы говорите, не очень хорошо поддерживается, и, опять же, это не очень подходит для взаимодействия пользователей с мобильными сайтами. Проблема с :checked : он полагается на флажках, что ставит довольно серьезные ограничения на поддерживаемую разметку.

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

Наиболее распространенное решение — использовать javascript touchevents, но если вы собираетесь использовать CSS, который не будет работать для вас.

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