使用 CSS 隐藏跨度但显示工具提示（必须使用高对比度和 IE8）答案

【问题标题】：Hide span with CSS but showing tooltip (has to work with high contrast and IE8)使用 CSS 隐藏跨度但显示工具提示（必须使用高对比度和 IE8）
【发布时间】：2014-10-07 18:23:31
【问题描述】：

我想隐藏一个包含工具提示的 span 元素，使用与背景相同的字体颜色，以便屏幕阅读器可以看到它并且在页面上不可见，但是如果将鼠标悬停在它上面，您仍然可以看到工具提示 (这不适用于 display:none)。

但这不起作用，如果您在窗口上打开高对比度，如图所示。

如何做到这一点？需要使用 IE 8 并且没有 JS。

感谢您的帮助！

<span title="vers_1.2.3.4" style="font-color:#000; background-color:#000">
Version
</span>

解决方案：

<span title="vers_1.2.3.4" style="font-color:#000; background-color:#000;">
 <p style="display:none">Version</p>
</span>

【问题讨论】：

请摆弄你的代码
使用可见性：隐藏；

标签： html css tooltip screen-readers high-contrast

【解决方案1】：

试试这个小提琴，也许这是你想要的

http://jsfiddle.net/8s1rbp65/2/

<span title="vers_1.2.3.4" style="font-color:#FFF; background-color:#fff">
    <p>Version</p>
</span>

span p{
    color:transparent;
    border:1px solid #000;//this is to identify the text, remove this
}

【讨论】：

感谢您的代码。我修改了它（因为颜色：透明不起作用）并且它起作用了（将在描述中添加它）。

【解决方案2】：

您是否尝试过使用普通的color:#000; 您是否尝试过使用color:transparent;。其中之一应该使您的文本不可见。

【讨论】：

不幸的是两者都不起作用（猜测 color=transparent isnt comp. with IE8）
颜色：rgba(0,0,0,0);也许是这个？

【解决方案3】：

您可以使用visibility:hidden; 隐藏到内容，它会提供所需的空间，不像display:none;

【讨论】：

不要认为这在这种情况下是合适的，因为 OP 声明他们希望内容对屏幕阅读器可见。请参阅Screen reader visibility 了解更多信息。
visibility:hidden 也隐藏了工具提示 :(