Question

所以我有一个附加了css样式的超链接，其中on：focus将显示一个（css）span工具提示，因此当用户点击<a href>Link</a>时，工具提示会显示在它旁边

（这适用于移动用户：hover对他们来说效果不佳）

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

＆＃39; a href＆＃39;用户点击有这个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;
}

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

基本上我想问的是，是否有这样的方法：焦点可以设置其他元素显示为永久性因此它（工具提示中的工具提示/链接）在以下情况下不会丢失：焦点丢失？

希望我已经充分解释了我的问题。（是的，我知道我可以使用javascript，但我宁愿使用CSS）

Answer 1

您可以考虑其他一些，例如：target或：checked，而不是使用：focus psuedo-class。这是一个CodePen示例，它使用隐藏的复选框来触发工具提示：

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

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

CSS3 - 使用：焦点问题显示工具提示

1 个答案: