css模拟title和alt的提示效果

作者:Satellite 来源:蓝色理想 时间:2007-11-08 13:03:00 

这段时间写了很多页面代码,除了一些知识重复以外,也学到css的一些新东西,或许是旧东西,但是还是希望能对大家有用。

其实在css里面有很多对a的样式应用,因为a标签是仅有的默认可以触发动作的标签,因此在很多时候可以用css来控制a达到js才能达到的效果,比如今天要介绍的css仿title和alt的提示效果:

先来分析一下这种效果的特点,无非就是在鼠标悬停的时候出现一个包含介绍文字的提示层,如果用传统的javascript来实现,就要设置对象的onmouseover和onmouseout属性,而如果把对象看作是a属性中的link和hover的话,这个问题就更清晰了,因为只要把对象的link属性设置为隐藏提示层、hover属性设置为呈现提示层即可,那么这个提示层的位置究竟在哪里呢?当然是在a标签中间了,目前常用的办法是把提示内容放在span标签中间进而包含在a标签内部,然后设置a:link和a:hover下不同的span样式即可。

下面结合代码给大家说一下这个简单的原理:


<style>
.info {position:relative;background:#fff;color:#666; text-decoration:none;font-size:12px;width:150px;text-align:center;border:1px solid #ccc;height:25px;line-height:25px;}/*设置链接的属性,一定要设置为relative才能使提示层跟着链接走*/
.info:hover {background:#eee;color:#333;}
.info span {display: none }/*设置正常下的span为隐藏状态*/
.info:hover span /*设置hover下的span属性为呈现状态,并设置提示层的位置*/{display:block;position:absolute;top:30px;left:60px;width:130px;
border:1px solid #ff0000; background:#fff; color:#000;padding:5px;text-align:left;}
</style>
<body>
<a class="info" href="http://www.achome.cn">www.achome.cn<span>这是我的个人blog,里面有一些网站设计和制作的东东</span></a>
<a class="info" href=http://www.aspxhome.com>www.aspxhome.com<span>asp之家,希望大家常来交流</span></a>
<a class="info" href="http://www.achome.cn">www.achome.cn<span>这是我的个人blog,里面有一些网站设计和制作的东东,希望大家常来交流</span></a>
<a class="info" href=http://www.aspxhome.com>www.aspxhome.com<span>asp之家,致力于为Asp学习者提供专业而高质量的Asp内容!</span></a>
<a class="info" href="http://www.achome.cn">www.achome.cn<span>这是我的个人blog,里面有一些网站设计和制作的东东,希望大家常来交流</span></a>
</body>


效果演示:

运行代码框


相关文章推荐:CSS实例讲解:地图提示

标签:title,alt,提示,css
0
投稿

猜你喜欢

  • DateDiff函数在Sql与Access中的区别

    2009-06-04 18:02:00
  • sp_executesql 使用复杂的Unicode 表达式错误的解决方法

    2012-01-29 17:58:52
  • ASP 精华源码收集(五年总结)第1/20页

    2011-04-07 11:15:00
  • ASP编程中的常见问题

    2007-09-20 13:32:00
  • Javascript的匿名函数

    2008-05-07 13:33:00
  • XMLHTTP中setRequestHeader的参数问题

    2008-09-30 10:48:00
  • 给展示性图片增加提示工具条(黑白效果)

    2007-10-20 14:21:00
  • 有效地使用 SQL事件探查器的提示和技巧

    2009-01-15 13:39:00
  • 用XMlhttp生成html页面

    2007-08-29 19:49:00
  • CSS的未来:一些试验性CSS属性

    2011-06-10 13:20:00
  • wiondws XP下安装MySQL图文教程

    2007-06-15 09:29:00
  • JavaScript 日期下拉选择器

    2008-10-31 12:13:00
  • 详解php如何合并身份证正反面图片为一张图片

    2023-05-22 10:44:46
  • MYSQL中取得最后一条记录

    2010-03-09 16:08:00
  • 获取一个数字的个位、十位、百位的函数代码

    2011-02-20 11:06:00
  • js实时获得服务器上时间

    2008-11-25 13:55:00
  • 如何把数据库的记录输出到表格去?

    2009-11-06 13:37:00
  • WML初级教程之从实际应用中了解WML

    2008-09-04 11:24:00
  • 教你为SQL Server数据库构造安全门

    2009-01-20 11:34:00
  • 编写SQL需要注意的细节Checklist总结

    2012-10-07 10:43:57
  • asp之家 网络编程 m.aspxhome.com