在手机上滚动时如何禁用：hover？

Question

我正在做一个已经存在的桌面网站的移动版（准确地说是响应版），它已经对它产生了很大的hover效果。 它经常发生，而不是当我通过触摸屏幕在移动设备上滚动时，它会触发一些性能高的hover动作，例如在大的box-shadow淡化和/或设置动画border 。 出于显而易见的原因，我不需要在移动浏览器上使用它，而且我听说仅对移动设备禁用滚动鼠标悬停可以提高性能。

有没有一种方法可以仅在移动设备上滚动时轻松地临时禁用所有悬停效果 ？ 它是安全的（从UX角度而言），是否值得实施（从性能的角度来看）？

Answer 1

您可以将所有悬停效果设置为仅在主体具有特定类别时发生。 当您想要切换效果时，这将允许您简单地添加/删除该类。

的HTML

<body class="alloweffects">
<a>Some text</a>
</body>

的CSS

.alloweffects a:hover {
color:red;
}

然后，仅在滚动期间防止出现效果，您只需侦听滚动事件并相应地设置类即可。

关于性能：

我相信性能提升将很小，但在不同的浏览器和设备上可能会有所不同。

但是从根本上讲，这应该意味着事件监听器更少，这意味着更多的内存可以处理其他事物，其中包括滚动。

如果我们谈论的是大量元素，我相信性能提升将更为显着-特别是在较弱的设备上。

Answer 2

这值得一点测试，但问题是：

您想在移动设备上使用哪个断点（通常是480px）
如何选择所有当前可悬停的项目
您需要覆盖哪些效果

无论如何，一个好的起点可以是：

  @media screen and (max-width: 480px) {
  :hover > *  {
    // override current effects to none
  }

Answer 3

您想使用pointer-events: none;

CSS：

.disable-hover {
  pointer-events: none;
}

Javascript：

var body = document.body,
    timer;

window.addEventListener('scroll', function() {
  clearTimeout(timer);
  if(!body.classList.contains('disable-hover')) {
    body.classList.add('disable-hover')
  }

  timer = setTimeout(function(){
    body.classList.remove('disable-hover')
  },500);
}, false);

参考文章： http : //www.thecssninja.com/css/pointer-events-60fps

Answer 4

在您的响应式CSS中，为元素添加ax：hover类，但将其留空。 如果那不起作用，则取消效果。

在手机上滚动时如何禁用：hover？

问题描述

4 个解决方案

解决方案1
1 2014-12-28 23:23:12

解决方案2
0 2014-12-28 23:26:01

解决方案3
0 已采纳 2014-12-29 00:47:56

解决方案4
-2 2014-12-28 23:18:26

在手机上滚动时如何禁用：hover？

问题描述

4 个解决方案

解决方案1 1 2014-12-28 23:23:12

解决方案2 0 2014-12-28 23:26:01

解决方案3 0 已采纳 2014-12-29 00:47:56

解决方案4 -2 2014-12-28 23:18:26

解决方案1
1 2014-12-28 23:23:12

解决方案2
0 2014-12-28 23:26:01

解决方案3
0 已采纳 2014-12-29 00:47:56

解决方案4
-2 2014-12-28 23:18:26