仅提供工具提示CSS:焦点和悬停可防止访问以下按钮

Question

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之后加载)
• 工具提示必须出现在下面(不幸的是)

Answer 1

由于这些限制，我不知道有什么方法可以完美地解决您的问题。

解决方法是，可以将工具提示更改为按钮的同级项，而不是子项，并使用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;
}

实时示例：http：//codepen.io/anon/pen/azONYP

Answer 2

尝试将 CSS 重构为如下所示：

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