这段时间写了很多页面代码，除了一些知识重复以外，也学到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.achome.cn">www.achome.cn<span>这是我的个人blog，里面有一些网站设计和制作的东东，希望大家常来交流</span></a>
<a class="info" href="http://www.achome.cn">www.achome.cn<span>这是我的个人blog，里面有一些网站设计和制作的东东，希望大家常来交流</span></a>
<a class="info" href="http://www.achome.cn">www.achome.cn<span>这是我的个人blog，里面有一些网站设计和制作的东东，希望大家常来交流</span></a>
<a class="info" href="http://www.achome.cn">www.achome.cn<span>这是我的个人blog，里面有一些网站设计和制作的东东，希望大家常来交流</span></a>
</body>
效果演示：
运行代码框
全站资源
- 微软官方入门教程19：轻松掌握Vista系统的快
- 微软2008大冲击，预借Vista SP1力促Vista市
- 在收件箱中获得 Windows Vista 的最新更新
- 微软官方Vista入门教程全集19篇（Vista学院
- Windows Vista 的成功将势不可挡
- 快快抛弃Vista，拥抱XP SP3！你觉得呢？
- 浅谈Vista系统关闭虚拟内存与使用内存盘加速
- 嘿嘿，按下键盘上面的三个键，马上让你的Vi
- Windows Vista的盗版率只有Windows XP的一半
- 3DMark和PCMark Vantage新版将只支持Vista系
阅读排行
- 如何使用CSS来进行网页排版
- CSS样式表教程-If you love css …
- CSS用样式表美化你的网页
- 网页制作：几种所见所得的WEB在线编辑器
- 网页常见可用性错误——表单组件错误
- CSS+JavaScript打造超酷右键菜单
- 针对浏览器隐藏CSS之九大技巧
- DIV＋CSS网页布局入门
- 搜索引擎的蜘蛛人（ROBOTS）秘密
- CSS垂直树形下拉菜单
最新技术文档
- 导航上用CSS标志当前页效果的实现
- CSS的“顶级技巧”
- 实时切换网页的CSS样式实现
- 提高网页的用户体验：字体大小的设计
- 像表格table一样轻松布局div层
- css模拟title和alt的提示效果
- CSS布局中自适应高度的解决方法
- 创建自定义代码片段 提高CSS布局开发效率
- 什么是DOCTYPE 它对网页起何作用？
- CSS实现导航条图片的翻转菜单
专题教程
- 大话G游 专题：手机病毒揭密
- ARP攻击防范与解决方案 路由故障处理手册
- Picasa中文版_Picasa教程 专题：清除流氓软件
- Firefox专题 seo搜索引擎优化专区
- 重装Windows必知的事情 装机之必备软件大行动
病毒专杀栏