简单有效的纯CSS提示框
先写出HTML结构:
<p> <a href="https://www.3code.cn/">简单有效的纯CSS提示框<span>(这是提示内容--简单有效的纯CSS提示框)</span></a> 简单有效的纯CSS提示框简单有效的纯CSS提示框简单有效的纯CSS提示框 </p>
上面的代码中，将锚设置类名为tooltip，是为了区别其它不需要提示框的锚。接着，需要将该锚的position属性设置为relative，这样才可验对span的内容进行绝对定位。同时
不希望提示在最初时就显示出来,所以将它的display属性设置为none,经过这些分析,CSS可以这样写,并不难:)
<style>
a.tooltip {position:relative;}
a.tooltip span{display:none;}
a.tooltip:hover span {
display:block;
width:180px;
position:absolute;
top:1em;left:2em;
/*给span加一些填充、边框等----*/
padding:0.2em 0.6em;
border:1px solid #ff6633;
background-color:#ccc;
color:#000;
/*----*/
}
/*为了让IE6.0 也有效果----*/
a.tooltip:hover{
font-size:100%;/*Fixex bug in IE5.x/Win */
/*----*/
}
/*去掉IE显示提示框的下线----*/
a.tooltip:hover span {text-decoration:none;
/*----*/
}
</style>