纯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中！所以，能支持的情况下，还是不要忽略。