纯CSS Tooltips提示
作者:timed90 来源:蓝色理想 发布时间:2008-10-18 16:01:00
标签:Tooltips,提示,css
事实上各式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;
}
0
投稿
猜你喜欢
- 我查了资料:setRequestHeader,单独指定请求的某个http头语法oXMLHttpRequest.setRequestHeade
- 先使用 Ms Access 压缩修复,然后再去相关的表把备注类型的字段里的“索引”去掉 备注型字段为什么不能超过1950字节?是由于备注型字
- 在前一文中记述了Access启动不了,或者出现“正在准备安装……”的问题,今天则找到了Access对控件支持的问题。本来Access、Exc
- 当然首先得去下载ASPupload 程序,安装后使用!官方网站下载:http://www.aspupload.com/使用ASP实现文件上载
- 在SQL Server数据库管理中,针对分析服务Analysis Services 的性能优化必不可少,这里我们将学习到使用DMV来进行An
- 选项default-charaset-set=utf8;然后创建一个数据表 create table a_table(b varchar(2
- 1、from子句组装来自不同数据源的数据; 2、where子句基于指定的条件对记录行进行筛选; 3、group&nb
- Web标准的web UI——来源、谬误与个人理解序我从2004年末开始接触web标准,2005年5月正式采取完全的web标准方式的网页制作,
- 问一下谁知道如何用 javascript 获取硬盘信息1.获得硬盘当前有几个盘符.2.每个盘符的 大小,已经使用的大小,和没有使用的大小原理
- 1 create table test(coltest varchar(20))2 实现这一功能 的 sql 语句 s
- 这段时间,关于asp的前途,关于asp的好坏的讨论贴,都有好些了。当然,大家的心都是好的,但是一些朋友说的话,真是让人郁闷。个人觉得,在现在
- 本文系统的对HTTP Headers进行了简明易懂的阐述,我仅稍作笔记。什么是HTTP HeadersHTTP是“Hypertext Tra
- 1.在使用MySQL和php的时候出现过中文乱码问题(1) 只要是gb2312,gbk,utf8等支持多字节编码的字符集都可以储存汉字,当然
- 很多朋友希望,我能把我做网站的一些流程及经验跟大家分享一下,最近刚好做一次内部培训,所以稍微整理了一下,这些只是针对网页初学者,具有一定平面
- 1、善用css缩写可以减少页面文件大小,提高下载速度,同时使代码简洁可读。代码:div{ b
- 如何做一个检索结果带链接的检索?具体代码和说明如下:<% data=request.form("search_da
- 问:我最近升级了一个应用程序,使其可以在 SQL Server 2005 上运行。我利用了允许行长度超出 8,060 个字节这项功能,以便用
- asp连接sql server代码如下:dim connset conn = Serve
- 请问如何在Oracle Setver端检测ODBC是否连接好了?首先,在SQLPLUS安装时勾选oracle open client ada
- 让ASP搭配MYSQL所需要工具mysql-4.1.11-win32 myodbc-3.51.11-1-dll myodbc-3.51.11