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

Question

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

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

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

我只是想测试一下，但我没有 iPad 来尝试：

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

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

Answer 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>

Answer 2

根据评论，:active 想法似乎行不通。

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

所以我的答案只是使用 JavaScript onclick 添加一个 class ，这将导致下拉列表出现。

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

Does tapping an <a> tag with an iPad trigger CSS :focus status?

css

ipad

focus