关于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动画(开启gpu加速)
Dec 23 HTML / CSS
利用CSS3实现圆角的outline效果的教程
Jun 05 HTML / CSS
css3 中的新特性加强记忆详解
Apr 16 HTML / CSS
详解background属性的8个属性值(面试题)
Nov 02 HTML / CSS
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
Oct 20 HTML / CSS
用HTML5实现鼠标滚轮事件放大缩小图片的功能
Jun 25 HTML / CSS
使用HTML5中的contentEditable来将多行文本自动增高
Mar 01 HTML / CSS
详解HTML5中表单验证的8种方法介绍
Dec 19 HTML / CSS
HTML5 3D旋转相册的实现示例
Dec 03 HTML / CSS
canvas如何实现多张图片编辑的图片编辑器
Mar 10 HTML / CSS
AmazeUi Tree(树形结构) 应用小结
Aug 17 HTML / CSS
CSS中使用grid布局实现一套模板多种布局
Jul 15 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
DOTA2游戏同人动画《龙之血》导演接受采访
2021/03/05 欧美动漫
php利用新浪接口查询ip获取地理位置示例
2014/01/20 PHP
PHP的Yii框架中Model模型的学习教程
2016/03/29 PHP
Thinkphp5框架实现图片、音频和视频文件的上传功能详解
2019/08/27 PHP
PHP查找一列有序数组是否包含某值的方法
2020/02/07 PHP
jquery移除button的inline onclick事件(已测试及兼容浏览器)
2013/01/25 Javascript
jQuery基本过滤选择器使用介绍
2013/04/18 Javascript
Jquery同辈元素选中/未选中效果的实例代码
2013/08/01 Javascript
jquery Tab效果和动态加载的简单实例
2013/12/11 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
2016/02/17 Javascript
JS碰撞运动实现方法详解
2016/12/15 Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
2020/05/30 Javascript
vue数组对象排序的实现代码
2018/06/20 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
2018/08/27 Javascript
React注册倒计时功能的实现
2018/09/06 Javascript
关于NodeJS中的循环引用详解
2019/07/23 NodeJs
javascript Canvas动态粒子连线
2020/01/01 Javascript
[52:03]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第三场 1月31日
2021/03/11 DOTA
Python新手们容易犯的几个错误总结
2017/04/01 Python
Python中用post、get方式提交数据的方法示例
2017/09/22 Python
APIStar:一个专为Python3设计的API框架
2018/09/26 Python
Python根据文件名批量转移图片的方法
2018/10/21 Python
学习python可以干什么
2019/02/26 Python
Python绘图Matplotlib之坐标轴及刻度总结
2019/06/28 Python
解决python彩色螺旋线绘制引发的问题
2019/11/23 Python
Django 解决由save方法引发的错误
2020/05/21 Python
Python爬虫设置ip代理过程解析
2020/07/20 Python
css3 transform过渡抖动问题解决
2020/10/23 HTML / CSS
初中地理教学反思
2014/01/11 职场文书
最新茶叶店创业计划书
2014/01/14 职场文书
计生专干事迹
2014/05/28 职场文书
主要负责人任命书
2014/06/06 职场文书
环卫工作个人总结
2015/03/04 职场文书
Redis中有序集合的内部实现方式的详细介绍
2022/03/16 Redis
JS前端可视化canvas动画原理及其推导实现
2022/08/05 Javascript
Win11无法安装更新补丁KB3045316怎么办 附KB3045316补丁修复教程
2022/08/14 数码科技