Question

这可能吗？如果没有将所有悬停样式转换为mouseover侦听器，是否可以阻止触摸设备触发CSS悬停状态？

我有一个必须同时适用于触摸和指针输入的应用程序，它运行良好但是在悬停上应用的某些样式在触摸设备上没有意义，因为它们倾向于在用户点击后无限期地保留悬停状态对象

需要考虑的事项：

设备宽度与启用触摸的设备无关，我们在这里使用的触摸屏是桌面尺寸显示器。
我不想强迫用户通过触摸输入多输入设备

Answer 1

我按照上面评论中链接中分享的方法解决了这个问题。如果您不使用它，请考虑在此方案中使用Modernizr。我想听听其他一些方法......

正如用户Blender所提到的那样，您可以检查触摸事件，如下所示：

html.touch {
  /* Touch Device ~ No Hovers */
}

html.no-touch {
  /* Not a Touch is disabled */
}
html.no-touch .element:hover {
   opacity:.5;
}

Answer 2

我的解决方案是将hover-active css类添加到HTML标记中，并在所有CSS选择器的开头使用它：hover 并在第一个touchstart事件中删除该类。

http://codepen.io/Bnaya/pen/EoJlb

JS：

(function () {
    'use strict';

    if (!('addEventListener' in window)) {
        return;
    }

    var htmlElement = document.querySelector('html');

    function touchStart () {
        document.querySelector('html').classList.remove('hover-active');

        htmlElement.removeEventListener('touchstart', touchStart);
    }

    htmlElement.addEventListener('touchstart', touchStart);
}());

HTML：

<html class="hover-active">

CSS：

.hover-active .mybutton:hover {
    box-shadow: 1px 1px 1px #000;
}

不要在触摸设备上显示悬停状态

2 个答案: