纯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
投稿猜你喜欢
- MySQL常用的四种引擎的介绍（1）：MyISAM存储引擎：不支持事务、也不支持外键，优势是访问速度快，对事务完整性没有 要求或者以sele
- 原文作者：青女 附注及色样添加：Quester西式的色名及色样表，可以参见以下链接 (Java 类色彩兼容)：http
- python乱序字符串排序什么是乱序字符串排序乱序字符串排序是指一个字符串是另一个字符串的乱序排序，比如apple就是eppal的乱序字符串
在Oracle数据库中，如何查找，定位一张表最后一次的DML操作的时间呢？ 方式有三种，不过都有一些局限性，下面简单的解析、总结一下。1：使- cgo 使得在 Golang 中可以使用 C 代码。Hello World为了有一个较为直观的了解，我们来看一个简单的例子，创建文件 mai
- 有一个比较有意思的传参方式：比如在 demo1.py 中指定 action='store_true'的时候：parser.a
- close方法可以释放一个连接的资源，但是不是立即释放，如果想立即释放，那么在close之前使用shutdown方法shut_rd() --
- parseInt()是内置的 JS 函数，用于解析数字字符串中的整数。 例如，解析数字字符串'100'：const numb
- 本文实例讲述了Python使用Dijkstra算法实现求解图中最短路径距离问题。分享给大家供大家参考，具体如下：这里继续前面一篇《Pytho
- 本文实例展示了PHP实现的格鲁斯卡尔算法（kruscal）的实现方法，分享给大家供大家参考。相信对于大家的PHP程序设计有一定的借鉴价值。具
- 现在有一个xml，格式如下： <date> <item> <id> 1 </id> <
- 多线程到底什么是多线程？说起多线程我们首先从单线程来说。例如，我在这里看书，等这件事情干完，我就再去听音乐。对于这两件事情来说都是属于单线程
- 问题：有3扇关闭的门，一扇门后面停着汽车，其余门后是山羊，只有主持人知道每扇门后面是什么。参赛者可以选择一扇门，在开启它之前，主持人会开启另
- 1、简介AI 聊天机器人使用自然语言处理 (NLP) 来帮助用户通过文本、图形或语音与 Web 服务或应用进行交互。聊天机器人可以理解自然人
- 阅读《YUI学习笔记（1）》《YUI学习笔记（2）》YAHOO.lang.later，YAHOO.lang.trim，YAHOO.lang.
- 环境：Windows 10 专业版pycharm pro 2020.3django 3.2.1xadmin 选django2的版本一，安装这
- 这篇文章主要介绍了python enumerate内置函数用法总结,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价
- <? $dbh = @mysql_connect("localhost:3306","root"
- 本文实例讲述了Python基于matplotlib实现绘制三维图形功能。分享给大家供大家参考，具体如下：代码一：# coding=utf-8
- jQuery之父John Resig写过一篇《Sub-Pixel Problems in CSS》，一个50px宽的div中有4个float
