0

所以我有一个超链接，它附加了一个 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）

4

1 回答 1

1

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

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

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

于 2013-02-03T03:59:39.883 回答