工具提示仅CSS：焦点和悬停阻止访问以下按钮

我目前有一个项目列表，然后在右侧的项目旁边有一个按钮：

工具提示必须出现在

focus

上，并且工具提示必须出现在

hover

上-这是可行的，但问题是当一个项目被聚焦（单击后）-无法通过鼠标访问以下项目（因为之前的项目是聚焦的！）：

当鼠标悬停在工具提示上时，工具提示必须消失，但焦点会迫使它停留

测试用例如下所示：

任何人都可以提供一个没有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重构为以下内容：

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

---

有了这些限制，我不知道有什么办法可以完美地解决你的问题

作为一种解决方法，您可以将工具提示更改为按钮的同级，而不是子级，并使用CSS相邻同级选择器。这样，当用户单击工具提示时，按钮的焦点将丢失，工具提示将隐藏。这将需要您稍微固定一下工具提示的位置（我使用边距顶部作为快速修复）

代码

按钮：悬停+工具提示，
按钮：焦点+。工具提示，
按钮：激活+。工具提示{
能见度：可见；
不透明度：1；
边缘顶部：20px；
}

Lorem Ipsum Dlar集
X
你好工具提示

...

当鼠标离开工具提示时，是否需要将其完全移除？（如删除“：focus”）…因为如果允许在鼠标离开后再次显示工具提示，则可以使用：

button:focus>.tooltip:hover
{
  background: none;
  border: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  text-indent: -9999px;
}

codepen:

我的回答基于以下内容：

html

测试

css

[tooltip]:before {            
    position : absolute;
    content : attr(tooltip);
    pacity : 0;
}

[tooltip]:hover:before {        
    opacity : 1;
    margin-top:10px;
}

这是你的电话号码

更新 现在集中注意力。 新增指针事件：无

IE8是的是的

没有Javascript是的

必须低于YEP使用

将其悬停在对象的右侧如何？@LOTUSMS我不能这样做，因为这违反了业务需求。它还增加了复杂性（响应web、工具提示在屏幕外不可见等）

指针事件

css属性也会让点击通过工具提示，但IE8和IE9不支持。没有理由对我的问题进行否决，因为它太具挑战性或限制性。我提供了代码笔、代码和整个场景。我花了相当长的时间来阐述这个问题。我有一个半修复。如果某个按钮已聚焦，并且用户单击了工具提示，则该按钮将被取消。如果用户没有任何焦点，悬停时也会取消该选项。谢谢你的努力！这不起作用（甚至在chrome中也不起作用）-查看代码笔：-我来看看大纲的作用（我会检查出来）你是正确的。它在Firefox中工作，但你的问题暗示IE8+。回到绘图板…谢谢马塞洛，这真的很接近。我将尝试一下，看看是否能让它完美工作：）非常接近！但它并没有100%正常工作。工具提示也必须重新显示。这看起来很有希望。它是重新出现的，你的意思是它不需要重新出现（完全删除）？@Eran我想他的意思是，当你关注一个按钮时，你将鼠标悬停在它的工具提示上，它会隐藏并显示下面的按钮，但是现在显示的第二个按钮并没有在悬停时显示它的工具提示。谢谢发布。。可悲的是，也有很多闪烁在进行，如果你移动鼠标缓慢下来，闪烁大量可能是由于重叠。我在Firefox34.0和Chrome39中进行了测试。这里没有闪烁。我在linux上，所以我不能在internet explorer上测试。你在用什么？Chrome39，Windows7x64-可以在我的mac上试用。但无论如何，我们有严格的要求，必须与windows和mac、chrome、firefox、safari、ie8-11（argh）兼容。在这个解决方案中，工具提示不会出现在焦点上。这就是这个问题的症结所在。重点更新。当我盘旋在空中时，我认为这是一种天赋。无论如何，添加了pouinter事件：hvoer上没有，因此应该没有闪烁