如何使用CSS制作A标签的Title效果

已经大概学过HTML教程的都清楚，超链接标签A有一个属性TITLE，其作用就是当你鼠标指向这个A链接时，会自动出现提示文字。这个功能很好用，比如我有一排菜单，关看菜单名可能访问者不清楚是什么内容。这时你就可以在A中加入TITLE说明，示例如下：

这样当访问者鼠标指向这个链接时就会出现说明文字。但是样式单一。其实我们可以用CSS自己制作这个效果，请改成什么样式都是可以的。请看下面代码

　　<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="">www.web2bar.cn<span>欢迎访问网站制作教程网</span></a>
　　</body>

这样我们就可以用CSS来控制提示样式了。赶快去试试吧！

分享到：