使用 html 和 css 更改超链接的工具提示颜色答案

【问题标题】：Changing the tooltip color for a hyperlink using html and css使用 html 和 css 更改超链接的工具提示颜色
【发布时间】：2012-01-23 23:39:33
【问题描述】：

我需要更改工具提示的背景颜色，该工具提示将在鼠标悬停在超链接上时显示（用于在 firefox 和 ie6 及更高版本中使用）。是否有任何基于 css 和 html 的脚本（没有 jQuery 或 javascript）来执行此操作。

我知道背景颜色实际上是根据操作系统属性。

【问题讨论】：

标签： html css tooltip

【解决方案1】：

您不能更改标准工具提示的颜色，其声明如下：

<a title="tooltip"></a>

这是一个标准工具提示，其设计由特定的浏览器和操作系统选择。

如果不使用 javascript，您可能会有一个仅在悬停时出现的隐藏 div，但是我认为这对于锚链接来说会很混乱。

我知道您明确要求不使用 javascript/jquery，但我相信如果您改变主意，这将是一个很好的解决方案：

http://flowplayer.org/tools/tooltip/index.html

【讨论】：

【解决方案2】：

我是这样做的：

This is text before the 
<a href="#" class="TT-container">
  tool tip link<span class="TT-value">tool tip text</span></a> 
and this is after it.

.TT-container {
  position: relative;
  border-bottom : 1px dashed #999999;
}
.TT-value {
  display: none;
  background-color: #f8e7c7;
  color: black;
  border: 1px solid black;
  padding: 3px 5px 3px 5px;
  white-space: pre;
  text-decoration: none;
  z-index: 99;
}
.TT-container:hover {
  font-size: 100%;                          /* fix an IE bug */
  z-index: 2;
}
.TT-container:hover .TT-value {
  position: absolute;
  top: 5px;
  left: 20px;
  display: inline;
}

【讨论】：

【解决方案3】：

这是一种技术，完全抛弃了传统的工具提示，并创建了您自己的自定义元素，显示在:hover： http://sixrevisions.com/css/css-only-tooltips/

在 Google 上闲逛了一段时间后，我很确定无法在任何浏览器中设置默认 title 工具提示的样式，因此如果没有 JavaScript，上述技术是您唯一的选择。

【讨论】：

【解决方案4】：

您可以使用 HTML 和 CSS 创建您自己风格的工具提示。为此，您不会使用title 属性，而是使用一些内容元素，这些元素最初使用CSS 隐藏，然后通过:hover 的CSS 规则变为可见。有大量的页面解释和说明这些技术；例如，Google for css tooltip。

【讨论】：

【解决方案5】：

没有。背景颜色由浏览器/操作系统控制。如果您想自定义它，您需要创建一个自定义工具提示。这通常意味着javascript。

【讨论】：

【解决方案6】：

这是由操作系统控制的。

【讨论】：