http://codepen.io/anon/pen/wBaGgW
我目前有一个项目列表,然后右边有一个按钮：
工具提示必须出现在焦点上并且工具提示必须出现在悬停上 – 这有效但问题是当一个项目被聚焦(点击它之后) – 无法通过鼠标访问以下项目(因为前面是项目聚焦！)：
当鼠标悬停在工具提示本身上时,工具提示必须消失,但重点是强制它停留.
测试用例在这里：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之后加载)
>工具提示必须出现在下面(不幸的是)
解决方法
有了这些限制,我不知道有什么方法可以完美地解决您的问题.
作为一种变通方法,您可以将工具提示更改为按钮的兄弟,而不是子项,并使用CSS相邻的兄弟选择器.这使得当用户单击工具提示时,它会从按钮失去焦点并隐藏工具提示.这将要求您稍微修正工具提示的位置(我使用margin-top作为快速修复).
HTML
<ul>
<li><span>Lorem Ipsum Dlar Set</span>
<button>X
</button>
<span class="tooltip">Hello ToolTip
</span>
</li>
...
</ul>
CSS
button:hover + .tooltip,button:focus + .tooltip,button:active + .tooltip {
visibility: visible;
opacity: 1;
margin-top:20px;
}
