Question

在我的网站http://www.robertfikesiv.com/上使用：hover事件触摸元素时，：hover属性将保持活动状态，直到触摸另一个具有：hover属性的元素。删除属性的唯一方法是刷新页面。

如何为ony触摸屏设备禁用：hover事件？

Answer 1

查看一个名为指针事件的方便新事物。如果你在一个元素上放置了pointer-events：none，那么即使在JS中也会禁用悬停和点击事件。

Answer 2

您可以在html元素中添加一个标识非触摸设备的类，并在第一个“触摸开始”上添加一个类。事件删除该类。下面的代码是一个基本的例子，但它应该可以正常工作。

HTML

<html class="notouch">...

CSS

.notouch .clickable:hover{
   color: #f00;
}

JS

document.documentElement.addEventListener('touchstart', function(){
    var className = document.querySelector('html').className;
    document.querySelector('html').className = className.replace(/notouch/, '');
}, false);

如何阻止：悬停状态在触摸屏上处于活动状态？

2 个答案: