CSS3 - 使用 a:focus 问题显示工具提示答案

【问题标题】：CSS3 - Showing a tooltip using a:focus issueCSS3 - 使用 a:focus 问题显示工具提示
【发布时间】：2013-02-03 11:59:39
【问题描述】：

所以我有一个超链接，它附加了一个 css 样式，它在 :focus 上将显示一个（css）跨度工具提示，因此当用户单击 <a href>Link</a> 时，它旁边会显示一个工具提示

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

但是，有一个问题。在工具提示中，有一些链接，但是当用户单击原始链接（：focus 已激活）然后单击工具提示上的另一个链接时，它显然会取消激活：focus，然后浏览器意识到将我重定向到该链接，从而使链接工具提示内无法使用。

用户点击的'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）

【问题讨论】：

标签： html css focus href

【解决方案1】：

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

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

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

【讨论】：