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

因此，我有一个附加了CSS样式的超链接，它在：focus上将显示（css）span工具提示，因此，当用户单击<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）

最佳答案

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

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

这可以为您提供所需的互动。

关于html - CSS3-使用a:focus问题显示工具提示，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14668164/