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

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

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

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

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

6
button hover html jquery touch

5 ответов

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

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

так:

html a { color:#222; }

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

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

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

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

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

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

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

1

возможно, это не то, что вы хотите, но вы можете указать разные таблицы стилей 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

0

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

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

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

.touch *:hover {
    display: none;
}

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

-2