是什么决定了 iPhone (mobile safari) 将使用 css :hover 伪类做什么？
我正在尝试让工具提示在各种移动设备上工作的方法。不幸的是，我需要支持的设备范围很广，从诺基亚到 iPhone。
不幸的是，我正在使用的一些浏览器不支持使用标题属性作为焦点工具提示。因此，我需要想出一个不同的解决方案。
首先，我正在使用纯 CSS 工具提示：http://psacake.com/web/jl。 asp
此方法使用 :hover 伪类来定位和设置 SPAN 的 z 索引以创建工具提示。
在 iPhone 上，这会产生一个奇怪的副作用。点击链接一次会显示工具提示，需要第二次点击才能真正激活链接。
但是，将简单样式应用于不同链接的 :hover 伪类（更改背景颜色）不会产生相同的效果。单击一下即可触发样式和链接（在加载下一页之前您会短暂看到 :hover 样式）。
我已经通过切换到使用 :focus 伪类解决了移动设备的这个问题，该伪类似乎不是由 iPhone（以及我正在使用的诺基亚触摸设备）触发的。当然，如果这个应用程序也用于桌面浏览器，那就不太理想了。
所以...问题：是否有关于 iPhone Safari 浏览器决定中断链接上的点击事件以公开 :hover 伪类与不中断并让链接在第一次点击时触发的逻辑记录？
I'm experimenting with ways to have tooltips work across a variety of mobile devices. Unfortunately, the span of devices I need to support ranges from Nokias to iPhones.
Unfortunately, some of the browsers I'm dealing with don't support the use of the title attribute for tooltips on focus. As such, I need to come up with a different solution.
For starters, I'm playing with pure-css tooltips: http://psacake.com/web/jl.asp
This method uses the :hover pseudo class to position and set the z-index of a SPAN to create the tooltip.
On an iPhone, this produced an odd side effect. Tapping the link once exposes the tooltip require a second tap to actually activate the link.
However, applying a simple style to a different link's :hover pseudo-class (changing the background color) does not have the same effect. One tap triggers both the style and the link (you see the :hover style briefly before the next page loads).
I've solved this issue for mobile devices by switching to using the :focus pseudo-class which appears to not be triggered by the iPhone (and the Nokia touch device I am using). Of course, that's not ideal if this app were to be used on a desktop browser as well.
So...the question: Is there documented logic as to when the iPhone Safari browser decides to interrupt a click event on a link to expose the :hover pseudo-class vs. not interrupting and letting the link be triggered on the first tap?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我试图在 Apple 文档中找到一个链接，但我能找到的关于 :hover 的最具体内容是它是模拟的，可能会导致意外结果。我确实找到一个地方说只有当用户点击并按住该对象时才会显示它。 该页面（靠近底部，“不要使用不受支持的 iOS 技术”）还表示，当发生这种情况时，也会显示正常的工具提示（使用标题属性）。
如果您接受关于为什么更改样式和显示工具提示的行为不同的假设，我猜它与处理 mousemove 事件的方式类似。这个 处理事件页面表示，如果页面内容在 mousemove 事件期间发生更改，则不会发送链中的其余事件（包括 mouseup）。我假设这种行为也适用于 :hover。如果您使用
display: none隐藏工具提示，您可以尝试使用visibility: hide来代替，因为它被解释为“该对象仍然在这里，但您可以”看不到它。”I was trying to find you a link in Apple's documentation, but the most specific I could find about :hover was that it is emulated and can cause unexpected results. I did find one place that said it is only shown if the user taps and holds the object. That page (near the bottom, "Don't Use Unsupported iOS Technologies") also says that normal tooltips (using the title attribute) would be shown when that happens also.
If you will accept an assumption as to why the behavior is different for changing the style and displaying a tooltip, I would guess that it is similar to the way mousemove events are handled. This Handling Events page says that, if the contents of the page change during a mousemove event, the rest of the events in the chain (including mouseup) are not sent. I am assuming that this behavior also applies to :hover. If you are using
display: noneto hide the tooltip, you could try usingvisibility: hiddeninstead as it is interpretted as "the object is still here, but you can't see it."