关于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实现质感细腻丝滑按钮
Mar 09 HTML / CSS
CSS中几个与换行有关的属性简明总结
Apr 15 HTML / CSS
一款恶搞头像特效的制作过程 利用css3和jquery
Nov 21 HTML / CSS
CSS3实现复选框动画特效示例代码
Sep 27 HTML / CSS
css3学习系列之移动属性详解
Jul 04 HTML / CSS
HTML5里autofocus自动聚焦属性使用介绍
Jun 22 HTML / CSS
一款利用html5和css3动画排列人物头像的实例演示
Dec 05 HTML / CSS
使用纯HTML5编写一款网页上的时钟的代码分享
Nov 16 HTML / CSS
利用HTML5 Canvas API绘制矩形的超级攻略
Mar 21 HTML / CSS
canvas线条的属性详解
Mar 27 HTML / CSS
HTML5 语义化标签(移动端必备)
Aug 23 HTML / CSS
CSS布局之浮动(float)和定位(position)属性的区别
Sep 25 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下把数组保存为文件格式的实例应用
2010/02/08 PHP
PHP 图片文件上传实现代码
2010/12/29 PHP
PHP详解ASCII码对照表与字符转换
2011/12/05 PHP
PHP高级对象构建 多个构造函数的使用
2012/02/05 PHP
ThinkPHP写第一个模块应用
2012/02/20 PHP
通过5个php实例细致说明传值与传引用的区别
2012/08/08 PHP
php使用sql数据库 获取字段问题介绍
2013/08/12 PHP
PHP面向对象程序设计内置标准类,普通数据类型转为对象类型示例
2019/06/12 PHP
超强的IE背景图片闪烁(抖动)的解决办法
2007/09/09 Javascript
setTimeout与setInterval在不同浏览器下的差异
2010/01/24 Javascript
Javascript Object.extend
2010/05/18 Javascript
jquery ajaxSubmit 异步提交的简单实现
2014/02/28 Javascript
JavaScript在网页中画圆的函数arc使用方法
2015/11/13 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
2016/06/12 Javascript
jquery+CSS3实现3D拖拽相册效果
2016/07/18 Javascript
利用Angularjs中模块ui-route管理状态的方法
2016/12/27 Javascript
vue双向数据绑定原理探究(附demo)
2017/01/17 Javascript
Javascript 链式作用域详细介绍
2017/02/23 Javascript
jQuery实现弹窗居中效果类似alert()
2017/02/27 Javascript
NodeJs模拟登陆正方教务
2017/04/28 NodeJs
javascript trie前缀树的示例
2018/01/29 Javascript
Node 升级到最新稳定版的方法分享
2018/05/17 Javascript
微信小程序 自定义弹窗实现过程(附代码)
2019/12/05 Javascript
如何基于js判断浏览器版本
2020/02/20 Javascript
python面向对象_详谈类的继承与方法的重载
2017/06/07 Python
python破解zip加密文件的方法
2018/05/31 Python
Django3中的自定义用户模型实例详解
2020/08/23 Python
Python通过字典映射函数实现switch
2020/11/06 Python
如何用python开发Zeroc Ice应用
2021/01/29 Python
美国在线旅行社:Crystal Travel
2018/09/11 全球购物
Paper Cape官网:美国婴儿和儿童服装品牌
2019/11/02 全球购物
总经理任命书
2014/03/29 职场文书
白鹤梁导游词
2015/02/06 职场文书
工人先锋号事迹材料(2016精选版)
2016/03/01 职场文书
tp5使用layui实现多个图片上传(带附件选择)的方法实例
2021/11/17 PHP
Python 数据可视化神器Pyecharts绘制图像练习
2022/02/28 Python