html - CSS3 - 使用 :focus issue 显示工具提示

Question

所以我有一个附加了 css 样式的超链接，在 :focus 上会显示 (css) span 工具提示，所以当用户单击 <a href>Link</a> 时工具提示会出现在它旁边

(这适用于移动用户，因为 :hover 对他们来说效果不佳)

但是，有一个问题。在工具提示中，有一些链接但是当用户单击原始链接(:焦点被激活)然后单击工具提示上的另一个链接时，它显然取消激活:焦点，在浏览器意识到将我重定向到该链接之前，从而使链接在工具提示中无法使用。

用户点击的“a href”具有此 css:

.tooltip:focus span {
    border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
    font-family: Calibri, Tahoma, Geneva, sans-serif;
    position: absolute; left: 1em; top: 2em; z-index: 99;
    margin-left: 0; width: 270px;
}

有什么方法可以修改它以使链接在工具提示中工作，而不是在单击时停用焦点并关闭工具提示？

基本上我想问的是，是否有一种方法可以让 :focus 将另一个元素显示设置为永久显示，这样当 :focus 丢失时它(工具提示/工具提示内的链接)不会丢失？

希望我已经充分解释了我的问题。 (是的，我知道我可以使用 javascript，但我更愿意使用 CSS)

Answer 1

除了使用 :focus 伪类，您还可以考虑其他一些伪类，例如 :target 或 :checked。这是一个使用隐藏复选框来触发工具提示的 CodePen 示例:

http://codepen.io/anon/pen/bEjcy

这可能会为您提供您正在寻找的互动。