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

Question

I'm doing a mobile (responsive to be exact) version of an already existing desktop site that already has a lot of hefty hover effects on it. 我正在做一个已经存在的桌面网站的移动版（准确地说是响应版），它已经对它产生了很大的hover效果。 It often happens, than when I scroll it on mobile by touching the screen it fires some performance heavy hover actions like fading in a big box-shadow and/or animating border . 它经常发生，而不是当我通过触摸屏幕在移动设备上滚动时，它会触发一些性能高的hover动作，例如在大的box-shadow淡化和/或设置动画border 。 I don't need that on mobile browser for obvious reasons and I've heard that just disabling hovers on scroll for mobile devices can result in a big performance gains. 出于显而易见的原因，我不需要在移动浏览器上使用它，而且我听说仅对移动设备禁用滚动鼠标悬停可以提高性能。

Is there a way to easily, temporarily disable all hover effects for the time of scrolling on mobile devices only ? 有没有一种方法可以仅在移动设备上滚动时轻松地临时禁用所有悬停效果 ？ Is it safe (from UX perspective) and is it worth implementing (from performance perspective)? 它是安全的（从UX角度而言），是否值得实施（从性能的角度来看）？

Answer 1

You could set for all of the hover effects to only occur when the body has a certain class. 您可以将所有悬停效果设置为仅在主体具有特定类别时发生。 Which would allow you to simply add / remove that class when you want to toggle the effects. 当您想要切换效果时，这将允许您简单地添加/删除该类。

HTML 的HTML

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

CSS 的CSS

.alloweffects a:hover {
color:red;
}

Then,to only prevent effects during scrolling you can simply listen to the scroll event and set the class accordingly. 然后，仅在滚动期间防止出现效果，您只需侦听滚动事件并相应地设置类即可。

Regarding performance: 关于性能：

I believe that the performance gain will be minimal but it'll probably vary on different browsers & devices. 我相信性能提升将很小，但在不同的浏览器和设备上可能会有所不同。

But basically it should mean less event listeners, meaning more memory to deal with other things, scrolling is among them. 但是从根本上讲，这应该意味着事件监听器更少，这意味着更多的内存可以处理其他事物，其中包括滚动。

if we're talking about large amounts of elements I believe that the performance gain will be more significant - especially on weak devices. 如果我们谈论的是大量元素，我相信性能提升将更为显着-特别是在较弱的设备上。

Answer 2

This deserves a little bit of testing but the issues are: 这值得一点测试，但问题是：

What breakpoint do you want to use for mobile (480px is usually the standard) 您想在移动设备上使用哪个断点（通常是480px）
How to select all currently hoverable items 如何选择所有当前可悬停的项目
What effects do you need to override 您需要覆盖哪些效果

Anyway a good starting point can be: 无论如何，一个好的起点可以是：

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

Answer 3

You want to use pointer-events: none; 您想使用pointer-events: none;

CSS: CSS：

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

Javascript: 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);

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

Answer 4

In your responsive css, add ax:hover class for the elements, but leave it blank. 在您的响应式CSS中，为元素添加ax：hover类，但将其留空。 If that does not work, negate the effect. 如果那不起作用，则取消效果。

在手机上滚动时如何禁用：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