纯CSS提示框的实现及其牵涉到的IE6下的a:hover问题。

首先，本文不是在宣扬什么新技术，而是一个古老的技术，但是做为一个web前端开发人员，其中的一些细节还是值得我去注意的。下面是效果的动画展示图。



方法分析：A标签支持4种状态的伪类，分别是:link :visited :hover :active。我利用了:hover伪类（指向时）。

那么A的结构应该是这样的 <a href="#">Some words<span>some tips</span></a>

正常状态下，将a下的span隐藏掉。指向A时，将span显示到合适的位置。

第1步：HTML结构，如下

<p>
<a href="http://www.cnblogs.com/mrweb" class="tooltip">
Mr.Web<span>(点击查看该博客)</span></a>
是一个关注前端开发的博客。
</p>

第二步：写CSS，如下

a.tooltip {
position:relative;
text-decoration:none;
}

a.tooltip span {
display:none;
}
a.tooltip:hover span {
display:block;
position:absolute;
top:1.2em;
left:0em;
padding:0.2em 0.6em;
border:1px solid #996633;
background-color:#ffff66;
color:#000;
width:200px;
}

对上面CSS的解析：

因为要对a中的span进行定位，所以为a添加了相对定位；

正常状态下span不显示；

指向时显示span，并定义span的外观及位置（使用绝对定位），让它看起来更像一个提示框

经过上面的步骤后，效果就出来了。但是IE6下，指向A时，span并没有显示出来。

难道是IE6不支持A:hover吗？—— 非也。IE6直接对于a:hover是支持的，但是如 a:hover selector {} 这样的形式并不一定支持的，这时候需要我们对a:hover{}特别的激活一下，这个激活操作具体应该如何，我也没有确定的方法，但是一般是添加一些如：background border之类的布局属性。（这个方法也是从网上看来的，不过不记得在哪里看到的了）

所以，下面激活一下，代码如下：

a.tooltip:hover { border:none; }

其实我的a:hover本来就没有边框，所以添加一个border:none并不会影响到显示效果，而且还让IE6支持了 a:hover selector {}。

PS:虽然大家都说IE6已经死了，但实际上IE6还活在广大中国网友的PC中！所以，能支持的情况下，还是不要忽略。