一个css的使用技巧及需注意的地方

今天在经典上看了几篇关于web标准的文章，学习到了一些以前不知道的css技巧，有的甚至让偶“拍案叫绝”，嘿嘿、、、
在一个块元素中定义一个子块并设定其position为absolute时，其未知的是相对父块的范围进行绝对定位的（即其左侧和顶部的0点为父元素的0点）。

利用此特点我们可以仅用css实现一些比较特殊的效果，如tooltips效果。二级三级菜单效果等。

代码如下：
 <br /><br /><br /><br /><br /> <a class="tooltips" href="#tooltips">这就是Tooltips<span>如你所见，这些附加的说明文字在鼠标经过的时候显示。</span></a> <style type="text/css"> /*Tooltips*/ .tooltips{ position:relative; /*这个是关键*/ z-index:2; } .tooltips:hover{ z-index:3; background:none; /*没有这个在IE中不可用*/ } .tooltips span{ display: none; } .tooltips:hover span{ /*span 标签仅在 :hover 状态时显示*/ display:block; position:absolute; top:21px; left:9px; width:15em; border:1px solid black; background-color:#ccFFFF; padding: 3px; color:black; } </style>
其原理即是：在a标记内定义一个span标记，其中写入tooltip信息，然后设定span的display:属性为none，然后设定当鼠标放到a元素上时，span的display属性为显示，并且设定span的position为absolute，然后调整其top和left属性即可。这样好像就是js实现的动态提示效果，果然够妙的办法。

实现二级菜单方法同这个基本相同。

Yemoo'S JS Blog 2006-09-28 12:20 发表评论