纯CSS实现动态提示信息Tooltips

作者:zdzhuo 来源:无忧脚本 时间:2008-05-22 11:56:00 

也许已经有人发现可以这样写...

CSS代码部分

a.info {
    position:relative; z-index:0; background-color:#ccc; color:#000; text-decoration:none }

a.info:hover {
    z-index:1; background-color:#ff0 }

a.info span {
    display: none }

a.info:hover span {
    display:block; position:absolute; top:12px; left:2px; width:160px; border:1px solid #0cf; background-color:#cff; color:#000; text-align: center }

body区调用方法

1.<a class="info" href="javascript:;"><b>需要添加注释的文本</b><span>提示信息</span></a>

2.<a class="info" href="javascript:;"><img src="需要添加注释的图片"><span>提示信息</span></a>

测试浏览器:ie6.0;ns7.0;ff1.5;moz1.7正常




 

标签:提示,css,Tooltips
0
投稿

猜你喜欢

  • 关于淘宝商城新版的一点看法

    2009-06-28 16:00:00
  • 无法远程登入MySQL数据库的几种解决办法

    2012-04-13 11:57:41
  • SQL集合函数中case when then 使用技巧

    2011-09-30 11:54:59
  • 网页设计应急小技巧

    2011-10-05 18:52:57
  • 改变链接,让别人永远找不到你的程序

    2008-09-13 18:57:00
  • 30步检查SQL Server安全列表

    2008-12-18 14:28:00
  • CSS布局之浮动(二)三列浮动

    2008-08-19 12:47:00
  • asp 延时 页面延迟的三种方法

    2011-03-31 11:04:00
  • 管理员必读10个重要MySQL客户启动选项

    2008-06-07 16:57:00
  • :hover在IE6下的问题

    2009-06-18 21:09:00
  • 如何以及何时使用sIFR

    2008-03-07 12:38:00
  • 惰性函数定义模式

    2007-09-26 20:56:00
  • 用Dreamweaver MX轻松操作表格

    2009-05-29 18:41:00
  • ASP程序中使用断开的数据记录集

    2007-10-17 18:51:00
  • 导航设计的流行趋势

    2007-12-25 12:06:00
  • 用VB生成DLL封装ASP代码一个例子:连接access数据库等

    2008-04-07 13:06:00
  • 加密处理使密码更安全[CFS编码加密]

    2008-03-19 13:30:00
  • asp无限级分类

    2007-09-16 18:06:00
  • PHP Laravel门面的实现原理详解

    2023-05-25 06:42:36
  • YUI3新特性学习

    2012-04-26 16:25:20
  • asp之家 网络编程 m.aspxhome.com