HTML-элемент сенсорного устройства: состояние при наведении

Question

Есть кнопка HTML с 3 фонами - каждый для нормального состояния, при наведении и клике. Конечно, он отлично работает с не сенсорным устройством. Если кнопка нажата на сенсорном устройстве, состояние:hover также срабатывает и остается до касания другого элемента.

Можно ли программно удалить состояние hover из элемента после его нажатия или запретить его активацию на сенсорных устройствах?

Извините, но предложения по обнаружению событий mouseover и mouseout и добавления искусственных классов не принимаются.

Одним из возможных решений является добавление класса "без прикосновения" к элементу html заранее и удаление его, если обнаружено только сенсорное устройство. В этом случае селектор CSS "html.no-touch button:hover" не будет соответствовать сенсорному устройству.

Знаете ли вы более элегантные решения, которые вы можете предложить?

Answer 1

Я бы попробовал переписать :hover укажите в дополнительной таблице стилей для портативных устройств, таких как:

<link rel="stylesheet" type="text/css" href="handheld.css" media="handheld">

И в handheld.css положить что-то вроде:

#some_selector:hover {
    background: none;    /* if you are setting a background in the main css file for example */
}

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

Изменить: Кажется, вы не можете обнаружить устройства с сенсорным экраном 100% надежно, также см. Этот вопрос.

Answer 2

Кажется, что эту проблему можно решить, переписав состояние:hover для данного элемента в медиа-запросе - посмотрите этот вопрос:

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