关于CSS Tooltips(鼠标经过时显示)的效果
2013-04-10 10:49
483 查看
事实上各式Tooltips方法非常多,不过大部分都是用Javascript实现,但是使用CSS,可以更简单,更有效率。最重要的是符合标准。
我们对类加入position:relative属性,使得span标签的位置能够紧跟在链接后面。
我们对类加入position:relative属性,使得span标签的位置能够紧跟在链接后面。
<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>
相关文章推荐
- jQuery制作鼠标经过显示图片大图,生成图片tips效果
- css 控制鼠标显示效果
- jQuery经过显示图片大图 图片tips效果
- 使用css设置网页元素的动态效果(如鼠标经过)
- 鼠标经过时链接文字的特别震撼的显示效果
- JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
- 分享一个jquery插件:实现类似淘宝上鼠标经过图片右侧显示大图的效果
- CSS实现的鼠标经过按钮的效果
- CSS实现DIV感应鼠标Hover时的显示隐藏效果
- jQuery事件 mouseover方法与mouseout方法实现鼠标移进显示移出消失的效果 (css控制span标签)
- 转:纯CSS实现“鼠标移过显示层”效果
- 鼠标经过显示边框与背景颜色效果
- css鼠标悬浮显示效果(鼠标手势)
- 鼠标经过图片显示边框的CSS代码
- js 鼠标经过显示隐藏效果实例
- 提示框 9款css3 tooltips鼠标悬停显示消息提示框样式(精)
- Flex中如何创建一个自定义数据显示Tips的slider控件。鼠标按住滑标察看效果
- css实现 鼠标移上放大效果 或 显示隐藏内容 简单原型
- js实现图片显示局部,鼠标经过显示全部的效果