Pure css для: наведите указатель мыши только на мышь

Question

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

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

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

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

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

Answer 1

Метод 1: Javascript

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

if(//Code to detect mobile) 
    $("body").removeClass("no-touch"); 

---

Тогда в вашем CSS, код все :hover быть зависимым от этого родительского класса.

.no-touch a:hover 
{ 
    text-decoration: underline; 
} 

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

---

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

body:not(.touch) a:hover 
{ 
    text-decoration: underline; 
} 

---

Не совершенным , поскольку он по-прежнему требует JS, но в настоящее время нет известного метода pure-css для обнаружения событий касания, а не событий мыши, по крайней мере, поскольку мне удалось найти несколько обширный поиск Google.

---

Метод 2: CSS Media Queries

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

Это имеет то преимущество, что является чисто CSS, но все же имеет свои собственные ловушки.

Вы можете иметь кого-то, используя IPad в ландшафтном @ 1024x768, что будет считаться сенсорным устройством, в то время как пожилой человек использует рабочий стол на ЖК-монитор старый 3x2, который имеет такое же разрешение: 1024x768

Вот код, хотя, если вы хотите:

@media all and (min-width: 1024px) 
{ 
    a:hover 
    { 
     text-decoration: underline; 
    } 
}