如何阻止 iOS Safari 将光标保持在浏览器面板的左上角像素中？答案

【问题标题】：How can I stop iOS Safari from keeping the cursor in the topleft pixel of the browser pane?如何阻止 iOS Safari 将光标保持在浏览器面板的左上角像素中？
【发布时间】：2013-01-07 07:39:50
【问题描述】：

我有一个网站，http://ADHD.BHStudios.org，它有一个侧边栏，在您将鼠标光标悬停在它上面之前应该保持隐藏状态（纯 CSS）。但是，在 iOS Safari 中，浏览器窗格总是被告知光标位于左上角像素中，这会强制此侧边栏始终保持打开状态，而不是在用户触摸它以使其获得焦点时。 如何阻止 iOS Safari 将光标保持在浏览器窗格的左上角像素，这样做后如何保持“触摸展开”功能？ 其他浏览器和其他操作系统没有这个问题。在装有 iOS 5 和 6 的 iPad 2、iPad 3 和 iPhone 4s 上测试。同样，这适用于其他移动浏览器和其他移动设备，例如 Opera Mobile（iOS 和 Android）、Chrome（iOS 和 Android），以及默认Android 2.2 浏览器。

【问题讨论】：

标签： ios css mobile-safari cursor-position

【解决方案1】：

iPhone 有不同的布局，但在 iPad 上，侧边栏永远不会打开。所以，我无法复制你的那部分问题。

至于悬停问题，显然触摸屏设备上没有悬停伪类。您必须将事件侦听器附加到 touchstart 事件

document.getElementById('top').addEventListener('touchstart', function(){...});

你可以设置一个计时器让它消失（把它放在你的 touchstart 回调中）：

 setTimeout(function(){...}), [milliseconds]);

我就是这样做的。

【讨论】：

谢谢，但我试图让这个网站保持 JS-less。我很惊讶你没有遇到这个问题，因为这对我来说似乎是一个常数。 :hover 伪类在其他触摸浏览器上也能正常工作，比如 I siad，但不是 Safari。
但是“悬停”如何在触摸屏设备上工作？从 DOM 的角度来看，用户要么在“点击”（“touchstart”事件），要么根本不进行交互。没有相当于鼠标悬停的触摸屏。移动 chrome 如何模拟悬停在触摸屏上（我不是在夸夸其谈，我是 iOS 人，我很好奇）。以下是移动 safari 活动指南：developer.apple.com/library/ios/#documentation/…
您可以在触摸屏设备（如 Android 平板电脑）上“悬停”，方法是触摸您想要悬停的内容。它将生成一个悬停和单击事件（如果 DOM 元素支持，则为活动和焦点）。它被认为是悬停，因为非 Safari 浏览器会在您触摸的任何位置移动虚拟光标。尝试在 Android 平板电脑上加载我的网站，您就会明白我的意思了。