纯CSS Tooltips提示
作者:timed90 来源:蓝色理想 时间:2008-10-18 16:01:00
事实上各式Tooltips方法非常多. 不过大部分都是用Javascript实现.
例如ikshow.cn, 使用的JavaScript, DHTML Tooltips。
我承认我的Javascript很水皮……但是使用CSS,可以更简单,更有效率。最重要的是符合标准。
我们对类加入position:relative属性,使得span标签的位置能够紧跟在链接后面.
来看看具体的代码:
运行代码框
其中定义z-index以确保弹出的Tooltips层在最上面。
使用: 定义以上类之后, 将类应用到具体标签上, 该标签中的 span 标签将作为Tooltips. 如:
<a class="tooltips" href="#tooltips">这就是Tooltips<span>如你所见,这些附加的说明文字在鼠标经过的时候显示。</span></a>
以上方法适合大部分现行的浏览器,例如Firefox,IE.
因为大多数现行的浏览器都支持将:hover选择器用到任何标签(参考whatever:hover). 对于只能用到a标签的浏览器,我们所需要做的仅仅是: 在类的前面加上"a"。具体如下:
/*Tooltips*/
a.tooltips{
position:relative; /*这个是关键*/
z-index:2;
}
a.tooltips:hover{
z-index:3;
background:none; /*没有这个在IE中不可用*/
}
a.tooltips span{
display: none;
}
a.tooltips:hover span{ /*span 标签仅在 :hover 状态时显示*/
display:block;
position:absolute;
top:9px;
left:9px;
width:15em;
border:1px solid black;
background-color:#ccFFFF;
padding: 3px;
color:black;
}
标签:Tooltips,提示,css
0
投稿
猜你喜欢
在 SQL Server 数据库开发中的十大问题
2009-07-02 16:39:00
Golang如何读取单行超长的文本详解
2024-05-10 13:57:21
Python使用captcha库制作带参数输入验证码案例
2022-01-25 20:26:03
DHTML中重要的属性方法
2008-06-21 17:13:00
PyQt5高级界面控件之QTableWidget的具体使用方法
2023-09-05 15:36:41
Python3删除排序数组中重复项的方法分析
2023-02-16 19:17:50
Python3.6实现根据电影名称(支持电视剧名称),获取下载链接的方法
2023-06-15 21:26:42
Pandas.DataFrame时间序列数据处理的实现
2022-09-20 08:43:41
如何在浏览器地址栏显示自己的Favicons.ico图标
2007-10-22 11:45:00
Python 打印中文字符的三种方法
2022-11-14 10:22:07
深入了解vue2与vue3的生命周期对比
2024-05-11 09:14:32
从ThinkPHP3.2.3过渡到ThinkPHP5.0学习笔记图文详解
2023-09-04 10:21:28
Python 可变类型和不可变类型及引用过程解析
2021-07-13 00:04:27
PHP页面静态化的优缺点与实现
2023-05-27 09:14:40
django1.8使用表单上传文件的实现方法
2022-04-28 11:32:02
从Pytorch模型pth文件中读取参数成numpy矩阵的操作
2021-12-27 11:05:53
使用AngularJS制作一个简单的RSS阅读器的教程
2024-05-03 15:31:35
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
2023-09-24 00:11:25
详解python使用canvas实现移动并绑定键盘
2022-08-18 01:02:52
vue 过滤、模糊查询及计算属性 computed详解
2024-05-09 09:53:30