css模拟title和alt的提示效果

【作者：Satellite 来源：蓝色理想更新时间：2006-10-26 | 字体：大中小】

这段时间写了很多页面代码，除了一些知识重复以外，也学到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这是我的个人blog，里面有一些网站设计和制作的东东</a> <a class="info" href="http://www.achome.cn">www.achome.cn这是我的个人blog，里面有一些网站设计和制作的东东，希望大家常来交流</a> <a class="info" href="http://www.achome.cn">www.achome.cn这是我的个人blog，里面有一些网站设计和制作的东东，希望大家常来交流</a> <a class="info" href="http://www.achome.cn">www.achome.cn这是我的个人blog，里面有一些网站设计和制作的东东，希望大家常来交流</a> <a class="info" href="http://www.achome.cn">www.achome.cn这是我的个人blog，里面有一些网站设计和制作的东东，希望大家常来交流</a> </body>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

收藏此页到 IE收藏夹 POCO网摘 [365Key] [ViVi] 百度藏搜和讯网摘天极网摘狐摘向您的朋友推荐此文章
转载请注明来源：文章大全网址：http://www.itlearner.com/article/
文章关键词：css alt
如意搜索搜索更多内容：css模拟title和alt的提示效果
特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转载的文章有版权问题请联系我们，我们会尽快予以更正。