关于CSS Tooltips(鼠标经过时显示)的效果


Posted in HTML / CSS onApril 10, 2013

事实上各式Tooltips方法非常多,不过大部分都是用Javascript实现,但是使用CSS,可以更简单,更有效率。最重要的是符合标准。
我们对类加入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>
HTML / CSS 相关文章推荐
详解CSS3 弹性布局快速入门
Jun 06 HTML / CSS
实例讲解CSS3中的box-flex弹性盒属性布局
Jun 09 HTML / CSS
CSS3中新增的对文本和字体的设置
Feb 03 HTML / CSS
详解CSS3弹性伸缩盒
Sep 21 HTML / CSS
HTML5是否真的可以取代Flash
Feb 10 HTML / CSS
简单html5代码获取地理位置
Mar 31 HTML / CSS
用html5的canvas和JavaScript创建一个绘图程序的简单实例
Jul 06 HTML / CSS
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
Jan 10 HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
Apr 30 HTML / CSS
Html5 滚动穿透的方法
May 13 HTML / CSS
AmazeUI底部导航栏与分享按钮的示例代码
Aug 18 HTML / CSS
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
Apr 07 HTML / CSS
用CSS3实现Win8风格的方格导航菜单效果
Apr 10 #HTML / CSS
纯css3(无图片/js)制作的几个社交媒体网站的图标
Mar 21 #HTML / CSS
用纯css3和html制作泡沫对话框实现代码
Mar 21 #HTML / CSS
css3一款3D字体带阴影效果的实现步骤
Mar 20 #HTML / CSS
css3 iphone玻璃透明气泡完美实现
Mar 20 #HTML / CSS
css3实现一款模仿iphone样式的注册表单
Mar 20 #HTML / CSS
css3打造一款漂亮的卡哇伊按钮
Mar 20 #HTML / CSS
You might like
如何使用动态共享对象的模式来安装PHP
2006/10/09 PHP
拼音码表的生成
2006/10/09 PHP
QueryPath PHP 中的jQuery
2010/04/11 PHP
完美实现GIF动画缩略图的php代码
2011/01/02 PHP
php中的curl_multi系列函数使用例子
2014/07/29 PHP
PHP实现批量检测网站是否能够正常打开的方法
2016/08/23 PHP
PHP序列化和反序列化深度剖析实例讲解
2020/12/29 PHP
Jquery 插件学习实例1 插件制作说明与tableUI优化
2010/04/02 Javascript
extJs 下拉框联动实现代码
2010/04/09 Javascript
15条JavaScript最佳实践小结
2013/08/09 Javascript
jquery live()重复绑定的解决方法介绍
2014/01/03 Javascript
js对图片base64编码字符串进行解码并输出图像示例
2014/03/17 Javascript
js正则表达式中exec用法实例
2015/07/23 Javascript
提升jQuery的性能需要做好七件事
2016/01/11 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
2016/01/22 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
2016/10/12 Javascript
详解百度百科目录导航树小插件
2017/01/08 Javascript
jquery仿微信聊天界面
2017/05/06 jQuery
js实现点击切换checkbox背景图片的简单实例
2017/05/08 Javascript
jquery实现左右轮播图效果
2017/09/28 jQuery
详解Python的Django框架中inclusion_tag的使用
2015/07/21 Python
Python实现的破解字符串找茬游戏算法示例
2017/09/25 Python
使用python的pandas为你的股票绘制趋势图
2019/06/26 Python
python hashlib加密实现代码
2019/10/17 Python
Pytorch保存模型用于测试和用于继续训练的区别详解
2020/01/10 Python
python实现人机猜拳小游戏
2020/02/03 Python
CSS3 @font-face属性使用指南
2014/12/12 HTML / CSS
性能服装:HYLETE
2018/08/14 全球购物
莫斯科大型旅游休闲商品超市:Camping.ru
2020/09/16 全球购物
.net软件工程师面试题
2015/03/31 面试题
理工大学毕业生自荐信
2013/11/01 职场文书
2014年污水处理厂工作总结
2014/12/19 职场文书
三方合作意向书范本
2015/05/09 职场文书
高中生社会实践心得体会
2016/01/14 职场文书
2019年大学推荐信
2019/06/24 职场文书
利用Java连接Hadoop进行编程
2022/06/28 Java/Android