Question

我正在对已经存在大量hover影响的现有桌面网站进行移动（准确反应）版本。这种情况经常发生，而不是当我通过触摸屏幕在移动设备上滚动它时，会触发一些性能沉重的hover动作，例如淡化box-shadow和/或动画border。出于显而易见的原因，我不需要在移动浏览器上使用它，我听说只是在移动设备的滚动上禁用鼠标悬停可以带来很大的性能提升。

是否可以轻松地暂时停用所有悬停效果，以便在仅限移动设备上滚动？是否安全（从用户体验的角度来看）并且值得实施（从绩效角度来看）？

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中，为元素添加x：hover类，但将其留空。如果这不起作用，则否定效果。

如何禁用：在移动设备上滚动时悬停？

4 个答案: