iphone：在不触发父：悬停事件之前答案

【问题标题】：iphone :before not triggering parent :hover eventiphone：在不触发父：悬停事件之前
【发布时间】：2014-06-07 23:18:17
【问题描述】：

我为移动主题创建了一个 CSS 下拉菜单，该菜单一开始是折叠的，并且有一个带有“菜单”字样的 :before 元素。这个想法是当用户悬停/单击/触摸菜单“按钮”时，它会展开并显示菜单的其余部分。

这适用于桌面浏览器、android 默认浏览器和 android chrome，但不适用于 iPhone。我知道 iPhone 上存在点击事件委托问题，但是仍然遵守 :hover 事件，这让我认为 :before 元素上的 :hover 事件存在问题，没有正确冒泡。

这是问题吗？是否有针对此的 CSS 修复？是否有针对此的 javascript 修复程序（除非绝对必要，否则我宁愿不使用 javascript）？

【问题讨论】：

iOS 上的大部分:hover 行为是compatibility measures 的结果。一般来说，由于显而易见的原因，鼠标事件和 :hover 伪类在 iOS 上不受可靠支持。

【解决方案1】：

一般来说，当涉及到触摸屏设备时，使用:hover 伪类是一个“坏主意”。主要是因为行为可能是“出乎意料的”，不会是“面向未来的”。

AaronAsAChimp 发布的“解决方案”有效，因为它使用 clickable 元素（此处为 a 元素），这是 iOS 触发事件所必需的（请参阅：Handling Events） .

但它在可用性方面也有一个主要缺点，因为除了使用返回按钮之外，您无法关闭菜单！

所以我的建议是：
对于您各自的（纯）CSS 解决方案，始终使用 :target 伪类而不是 :hover。

如果 JS 可用，请使用 Javascript 解决方案。这让您更轻松地处理整个事件，让您的访客更舒适！

大约 98% 以上的访问者启用了 JS。

我什至会说，现在没有 Javascript 支持的响应式网页设计几乎是不可能的——至少是一场“噩梦”。

【讨论】：

很好地找到了 Netsurfer，我没有意识到 Apple 已经开始记录这一点。关于:target 有一些问题。 IE 可以可以用 JavaScript 完成并不意味着它应该。它是关于工作的正确工具。 :)
@AaronAsAChimp 关于您对浏览器支持的担忧：没有 JS IE :target 伪类：只需要两个 a 元素，它们具有像“#menu”（用于打开菜单）和“#”（用于关闭）这样的href。由于这些是锚标签，它们对 SEO 有什么坏处！？关于你的最后一点：正确，但恕我直言，在这种情况下，情况正好相反：仅仅因为可以用 CSS 完成某些事情并不意味着它应该这样做。使用 JS 使用渐进增强。
首先，这是一个很好的讨论，我真的很喜欢。 :) OP 或看到此线程的任何其他人可能无法选择是否支持 IE8。标签只是标签，HTML5 只是将它们标准化。旧 IE 需要一个小修复 (html5shiv) 才能使默认样式正常工作，但仍受支持。 CSS 几乎总是比 JS 更简单、更快。也许你在使用 JS 的情况下是值得的，也许 OP 没有。我不知道，我只是一个在互联网上随机出现的人。 :) 恭喜获得赏金。

【解决方案2】：

主要问题是 iOS 设备是触摸设备而不是指针设备。这会导致在将触摸事件转换为指针事件（如悬停）时出现问题。

iOS 使用启发式方法来确定应该接收指针事件的内容。您关心的是；元素必须是交互式元素（如链接或按钮）。 :before 伪元素不算作交互式。

你应该怎么做？为菜单按钮添加一个元素到您的列表中。

<li>
    <a href="#" class="menu-button">Menu</a>
</li>

然后在你的 CSS 中将“ul:before”更改为“ul .menu-button”。

ul .menu-button {
    height: 2em;
    width: 100%;
    /* ... */
}

【讨论】：