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

Question

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

javascripthtmlcsstouch

5

有可能吗？除了将所有的悬停样式转换为 mouseover 监听器之外，还有没有可能阻止触摸设备触发 CSS 悬停状态？

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

需要考虑的事项：

对于我来说，设备宽度与启用触摸的设备没有关系，我们使用的触摸屏是台式电脑大小的监视器。
我不想强制用户在多输入设备上使用触摸输入。

- George Reith

1

我发现你的问题非常有趣，并且找到了以下文章。虽然不是同样的问题，但是文章底部的解决方案是否适用于你的情况？ - Laurent S.

1

相关的：https://dev59.com/VWsy5IYBdhLWcg3w0RbT - xec

@Bartdude 谢谢，我唯一的抱怨是，我相信它检测的是设备是否支持触摸输入，而不是是否正在使用触摸输入。虽然比没有好，但不是最佳选择，因为它违反了我的第二个规则，即强制用户在多输入设备上通过触摸输入。据我所知，它也无法在IE10上工作（使用一种专有事件，对于这一点，我认为IE做得很对，还有边框模型），尽管你也可以尝试检测它。 - George Reith

2个回答

0

我的解决方案是将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;
}

- Bnaya

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Scott Meyers · Accepted Answer

我已经按照上面评论中分享的方法解决了这个问题。如果你没有使用它，请考虑在这种情况下使用Modernizr。也想听听其他方法...

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

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

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