您当前位置：首页 > web前端 > htmlcss > CSS打造的超级链接悬停效果代码

CSS打造的超级链接悬停效果代码

来源：程序员人生发布时间：2013-11-29 20:37:11 阅读次数：3517次

　　网(LieHuo.Net)教程 CSS做出漂亮的鼠标悬停提示效果，使用层的绝对定位，不管你的网页窗口如何变化，提示层始终处于理想位置不会改变，兼容性也良好，因些很实用的一个链接提示功能代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>链接悬停提示 - liehuo.net</title><meta http-equiv="Content-Type" content="text/html; charset=GB2312" /><style type="text/css">body {font:normal 12px Verdana}a#tip {position:relative;left:75px; font-weight:bold;}a#tip:link,a#tip:hover {text-decoration:none;color:#000;display:block}a#tip span {display:none;text-decoration:none;}a#tip:hover #tip_info {display:block;border:1px solid #F96;background:#FFEFEF;padding:10px 20px;position:absolute;top:0px;left:90px;color:#009933}</style></head><body><a id="tip" href="#" _fcksavedurl="#">网，专注站长教程！<span id="tip_info">网，关注站长，建设互联网！</span></a></body></html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.wfuyu.com/' _fcksavedurl='http://www.wfuyu.com/' target='_blank'>http://www.wfuyu.com/</a></center>
提示：可修改后代码再运行!

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 面向数据集成的ETL技术研究

下一篇 网站和搜索引擎是分工协作的伙伴关系

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点