利用CSS，打造纯CSS工具提示

来源:www.w3c2.com 本站 时间:07-11-24 点击数:

工具提示是当鼠标停留在具有title属性的元素上时一些浏览器弹出的黄色小文本框。一些开发人员结合使用JavaScript和CSS创建了样式多特的工具提示。但是，我们可以通过CSS 定位技术，创建纯CSS工具提示。这些技术需要符合标准的现代浏览器（比如FireFox）才能正确地工作。因此，它不是日常使用的技术。但是，它演示了高级CSS的能力，让你能够 体会一下CSS得到更好的支持后会是什么样的情况。
好了，闲话少说，进行实例。

首先我们需要创建结构良好的且有意义的（X）HTML；例如下：

<p>
<a href="http://www.w3c2.com/" class="w3c2">
致力于web2.0<span> WEB标准是由W3C（World Wide Web Consortium)和其他标准化组织制定的…… </span></a>标准的推广与应用。
</p>

这个链接设置类名为w3c2，以便从其他连接中区分出来。在这个连接中，添加希望显示为链接文本的文本，然后是包围在span中的工具提示文本。我将工具提示包围在圆括号中， 这样的话在样式关闭是这个语句仍然是有意义的。

首先需要的是将锚的position属性设为relative。这样就可以相对于父元素的位置对span的内容进行绝对定位。我们不希望工具提示在最初就显示出来，所以应该将它的display属 性设为none。

a.w3c2 {
 position:relative;
}
a.w3c2 span {
 display:none;
}

当鼠标停留在这个锚上时，希望显示span的内容。方法是将span的display属性设置为block，但是我们需要只在鼠标停留在这个链接上时才这样做。如果现在测试代码，当鼠标停 留在这个链接上时，链接的旁边会出现span文本。

为了让span的内容出现在锚的右下方，需要将span的position属性设置为absolute，并且为它定位到距离锚顶部5px，左边3px的位置。

a.w3c2:hover span {
 display:block;
 position:absolute;
 top:5px;
 left:3px;
}

这就是这种技术的主要部分。下面我们可以给这个核心部分添加点样式，让span看起来更像个工具提示。

a.w3c2:hover span {
 display:block;
 position:absolute;
 top:5px;
 left:3px;
 border:1px solid #333;
 padding:3px;
 background:#F8F8F8;
 color:#333;
}

至此，纯CSS工具提示完成了，我们可以在FireFox中查看。