小编doc*_*ore的帖子

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

我目前有一个项目列表,然后右边有一个按钮:

工具提示必须出现focus并且工具提示必须出现hover- 这有效,但问题是当项目被聚焦时(点击它之后) - 无法通过鼠标访问以下项目(因为前面是项目聚焦!):

当鼠标悬停在工具提示本身上时,工具提示必须消失,但重点是强制它停留.

测试用例在这里:http://codepen.io/anon/pen/wBaGgW

任何人都可以提供没有任何JavaScript的解决方案吗？另外,html标记不能改变太多.对HTML的最小更改是可以的.只是试图防止太多,因为我很可能需要补偿应用程序的其他部分以适应html更改.

这里显示了工具提示:

button:hover>.tooltip,
button:focus>.tooltip,
button:active>.tooltip {
    visibility: visible;
    opacity: 1
}

我可以隐藏工具提示,执行以下操作:

button:focus>.tooltip:hover {
    visibility: hidden;
    opacity: 0
}

但是,当鼠标在工具提示出现的区域内移动时,这会导致疯狂的闪烁效果.

请记住限制:

• 没有JavaScript
• 与IE8 +的兼容性(请注意,工具提示css来自我们的全局模块,我没有直接访问权限更改它,我正在处理一个单独的模块,我当然可以覆盖,因为我的css在全局css之后加载)
• 工具提示必须出现在下面(不幸的是)