Question

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

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

Answer 1

您无法更改标准工具提示的颜色，该工具提示声明为：

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

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

如果不使用javascript，你可能会有一个只在悬停时出现的隐藏div，但是我觉得这对锚链接来说会很麻烦。

我知道你特别要求没有javascript / jquery，但我相信如果你改变主意，这将是一个很好的解决方案：

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

Answer 2

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

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

Answer 3

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

Answer 4

我这样做：

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;
}

Answer 5

没有。背景颜色由浏览器/ OS控制。如果要自定义工具提示，则需要创建自定义工具提示。这意味着一般的javascript。

Answer 6

这是由操作系统控制的。

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

6 个答案: