Как предотвратить эффект липкого наведения для кнопок на сенсорных устройствах ⇐ Javascript
-
Гость
Как предотвратить эффект липкого наведения для кнопок на сенсорных устройствах
Я создал карусель с кнопками «Предыдущая» и «Следующая», которые всегда видны. Эти кнопки имеют состояние при наведении, они становятся синими. На сенсорных устройствах, таких как iPad, состояние наведения закреплено, поэтому после нажатия кнопка остается синей. Я этого не хочу.
[*]
Я мог бы добавить класс no-hover ontouchend для каждой кнопки и сделать мой CSS такой: button:not(.no-hover):hover {background-color: синий; но это, вероятно, очень плохо сказывается на производительности и не работать с такими устройствами, как Chromebook Pixel (который имеет как сенсорный экран и мышь) правильно.
[*]
Я мог бы добавить класс touch в documentElement и сделать свой CSS вот так: html:not(.touch) button:hover { цвет фона: синий; Но это также не работает на устройствах как с сенсорным, так и с сенсорным экраном. мышь.
Я бы предпочел удалить состояние наведения ontouchend. Но не похоже, что это возможно. Фокусирование на другом элементе не удаляет состояние наведения. Прикосновение к другому элементу вручную работает, но я не могу вызвать это в JavaScript.
Все решения, которые я нашел, кажутся несовершенными. Существует ли идеальное решение?
Я создал карусель с кнопками «Предыдущая» и «Следующая», которые всегда видны. Эти кнопки имеют состояние при наведении, они становятся синими. На сенсорных устройствах, таких как iPad, состояние наведения закреплено, поэтому после нажатия кнопка остается синей. Я этого не хочу.
[*]
Я мог бы добавить класс no-hover ontouchend для каждой кнопки и сделать мой CSS такой: button:not(.no-hover):hover {background-color: синий; но это, вероятно, очень плохо сказывается на производительности и не работать с такими устройствами, как Chromebook Pixel (который имеет как сенсорный экран и мышь) правильно.
[*]
Я мог бы добавить класс touch в documentElement и сделать свой CSS вот так: html:not(.touch) button:hover { цвет фона: синий; Но это также не работает на устройствах как с сенсорным, так и с сенсорным экраном. мышь.
Я бы предпочел удалить состояние наведения ontouchend. Но не похоже, что это возможно. Фокусирование на другом элементе не удаляет состояние наведения. Прикосновение к другому элементу вручную работает, но я не могу вызвать это в JavaScript.
Все решения, которые я нашел, кажутся несовершенными. Существует ли идеальное решение?
Мобильная версия