点击带有 iPad 的 <a> 标签会触发 CSS :focus 状态吗？答案

【问题标题】：Does tapping an <a> tag with an iPad trigger CSS :focus status?点击带有 iPad 的 <a> 标签会触发 CSS :focus 状态吗？
【发布时间】：2015-08-21 13:32:31
【问题描述】：

我有一个下拉菜单，它使用 CSS a#hoverlink:hover+div 使 div 出现，然后您可以单击 div 中的链接。

在 Android 上，当您单击悬停链接时，它会触发 :hover，因此可以正常工作。

我听说这不适用于 iPad。我怎样才能让它工作？我正在考虑使用:focus 作为:hover 的替代品来完成这项工作。在 iPad safari 中点击会触发:focus 吗？

我只是测试一下，但我没有 iPad 可以试用：

a#hoverlink+div { transition: all 2s; }
a#hoverlink:not(:focus)+div { visibility: hidden; opacity: 0; }

&lt;a href="javascript:" id="hoverlink"&gt;the link&lt;/a&gt;&lt;div&gt; yes! focus worked, now wondering if click works&lt;br/&gt;&lt;a href="javascript:" onclick="alert('great, it worked!')"&gt;click here!&lt;/a&gt;&lt;/div&gt;

【问题讨论】：

:active pseudo-class doesn't work in mobile safari 的可能重复项
我问的是:focus，而不是:active。
George Bailey 在我的 iPad (iOS 8) 上无法使用。
三星 Galaxy Tab 上也没有。在台式计算机上，文本会显示，但第二个链接不会产生警报。
Android 和桌面将使用:hover，因此它们可以正常工作。感谢您对:focus 的回答。

标签： css ipad focus

【解决方案1】：

您可以尝试使用 :target。下面是一个纯 CSS 示例。您应该可以根据自己的需要使用 Javascript 来调整它。

这里是使用 :target 的参考 https://css-tricks.com/on-target/

a#hoverlink+div { transition: all 2s; }
a#hoverlink:not(:target)+div { visibility: none; opacity: 0; }

<a href="#hoverlink" id="hoverlink">Show The Div</a>
<div>You should see this once the link is clicked</div>

【讨论】：

酷，不知道这是可能的。
此方法可以在不使用 JS 的情况下创建移动友好的 CSS 下拉菜单。我已经在几个 iOS 和 android 设备上对其进行了测试。对于实时用例，您可以访问paulrobertlloyd.com，他目前正在使用类似的 :target 技术进行移动导航。对于任何对他的 CSS 移动菜单背后的方法感兴趣的人，请查看此页面：creativebloq.com/netmag/…

【解决方案2】：

根据 cmets，听起来 :active 的想法行不通。

虽然 IMI 的 :target 技术可行，但在我的情况下，它会与 JavaScript 驱动的将哈希字符串用于其他目的相冲突。

所以我的回答是使用 JavaScript onclick 添加一个会导致下拉列表出现的类。

【讨论】：