css - 工具提示 CSS 仅 : focus and hover prevents access to following button

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 来 self 们的全局模块，我无法直接更改它，我正在开发一个单独的模块，我当然可以覆盖它，因为我的 css 加载在全局 css 之后)
• 工具提示必须出现在下面(不幸的是)

Answer 1

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

作为解决方法，您可以将工具提示更改为按钮的同级按钮，而不是子按钮，并使用 CSS 相邻同级选择器。这使得当用户单击工具提示时，它会失去按钮的焦点并且工具提示被隐藏。这将需要您稍微固定工具提示的位置(我使用 margin-top 作为快速修复)。

代码

button:hover + .tooltip,
button:focus + .tooltip,
button:active + .tooltip {
    visibility: visible;
    opacity: 1;
    margin-top:20px;
}

<ul>
  <li><span>Lorem Ipsum Dlar Set</span>
    <button>X
    </button>
    <span class="tooltip">Hello ToolTip
    </span>
  </li>
  ...
</ul>

实例:http://codepen.io/anon/pen/azONYP