CSS实现并美化超级链接中的alt和title效果

发布时间：2018-08-17 22:47 所属栏目：121 来源：站长网

导读：CSS实现并美化超级链接中的alt和title效果，实际上是CSS层的应用，实现仿Alt及Title的效果，鼠标放到链接上后就能看到效果，供CSS爱好者学习研究。代码演示： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/

　　CSS实现并美化超级链接中的alt和title效果，实际上是CSS层的应用，实现仿Alt及Title的效果，鼠标放到链接上后就能看到效果，供CSS爱好者学习研究。

　　代码演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS实现链接中的alt和title效果</title> <style type="text/css"> .tip{position:relative;color:#0000cc;text-decoration:none;font-size:12px;} .tip:hover{background:none;} .tip span{display:none;} .tip:hover span{display:block;position:absolute;top:20px;left:8px;border-bottom:2px solid #eee;border-right:2px solid #eee;} .tip:hover span p{border:1px solid #ccc;background:#fff;color:#000;padding:1px;text-align:left;font-size:12px;} </style> </head> <body> <a class="tip" href="http://www.veryhuo.com" target="_blank">烈火学院 www.Liehuo.Net<span> <p>教程丰富的网络学院</p></span></a> </body> </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：ASP站长网）