Question

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

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

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

Answer 1

主要问题是iOS设备是触控设备而非指针设备。将触摸事件转换为指针事件（例如悬停）时会出现问题。

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

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

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

然后改变＆＃34; ul：之前＆＃34;到＆＃34; ul .menu-button＆＃34;在你的CSS。

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

Answer 2

一般来说，触摸屏设备使用:hover伪类是一个“坏主意”。主要是因为行为可能是“意外”而且不会是“未来证据”。

AaronAsAChimp发布的“解决方案”有效，因为它使用可点击的元素（此处为a元素），iOS必须触发该事件（请参阅：{{ 3}}）。

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

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

如果JS可用，请使用Javascript解决方案。这使得整个事件处理对您来说更加轻松，对访问者来说更加舒适！

大约98％的访问者都启用了JS。

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