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

Question

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

$('.nav').append('<button class="restart">Restart</button>');

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

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

Answer 1

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

@media screen and (min-device-width:768px) and (max-device-width:1024px) /*catch touch screen devices */
{
    button.restart:hover
    {
        /* replicate 'up' state of element */
    }
}

Answer 2

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

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

так:

html a { color:#222; }

html.no-touch a:hover { color:#111; }

Answer 3

Вы можете указать тип медиа в ваших правилах CSS.

@media handheld {
  button.restart:hover {
    /* undo hover styling */
  }
}

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

(Кстати, это CSS, а не jQuery)

Answer 4

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

 <link rel="stylesheet" media="screen,projection,tv" href="main.css" type="text/css">
 <link rel="stylesheet" media="print" href="print.css" type="text/css">
 <link rel="stylesheet" media="handheld" href="smallscreen.css" type="text/css">

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

Answer 5

Один хороший и простой способ - использовать Modernizr.

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

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

.touch *:hover {
    display: none;
}

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