11
Dec
纯css工具提示
Posted by: smoke520首先感谢下css森林里的bansi提供解决问题的方法。
<style type=”text/css”>
body{ font-size:12px;}
a.aaa{position:relative;}
a.aaa span{display:none;}
a.aaa:hover{ cursor:hand;}/* 触发layout */
a.aaa:hover span{display:block; position:absolute; top:5px; left:10px; padding:5px; border:1px solid #000;}
</style>
<a class=”aaa” href=”#” mce_href=”#”>123<span>我是提示</span></a>
其实比较难弄的是在ie6下不能在父级定义font-size为px,所以采用 cursor:hand 或者 background:none 激活a.aaa:hover的layout为true。最终兼容ie6,ie7,ff。
还有,http://www.cssplay.co.uk/里面讲的layout的例子不错,可以看看收藏下。
Tags: 纯css工具提示