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

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

工具提示必须出现在焦点上并且工具提示必须出现在悬停上 – 这有效但问题是当一个项目被聚焦(点击它之后) – 无法通过鼠标访问以下项目(因为前面是项目聚焦！)：

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

任何人都可以提供没有任何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;
}

相关文章