JavaScript+Css 实现跟随鼠标的悬停提示信息

发布时间：2018-09-24 18:37:59 所属栏目：专访来源：站长网

导读：烈火网(LieHuo.Net)教程在以前的网页特效中，我们曾经提到过用纯CSS实现的TIPS提示信息，例如《Css实现鼠标悬停提示文字信息的效果》和《CSS打造的超级链接悬停效果代码》，在上两篇特效中实现的悬停效果都非常简单，并且不能跟随鼠标，今天我们就来看一

　　烈火网(LieHuo.Net)教程在以前的网页特效中，我们曾经提到过用纯CSS实现的TIPS提示信息，例如《Css实现鼠标悬停提示文字信息的效果》和《CSS打造的超级链接悬停效果代码》，在上两篇特效中实现的悬停效果都非常简单，并且不能跟随鼠标，今天我们就来看一个非常漂亮的TIPS效果。

<!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>鼠标跟随提示框</title> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <style type="text/css"> body{font:12px/1.8 arial;} a,a:visited{color:#3366cc;text-decoration:none;} a:hover{color:#f60;text-decoration:underline;} .tip{width:200px;border:2px solid #ddd;padding:8px;background:#f1f1f1;color:#666;} img{border:none;} </style> </head> <body> <a href="#" title="liehuo.net" target="_blank"><img src="http://www.veryhuo.com/liehuo.net/images/liehuo2009/logo.gif" title="liehuo.net" onmouseover="tip.start(this)" tips="烈火提供互联网资讯与教程，是站长、程序员、网页设计师等交流与学习的网络平台，烈火一直坚持为互联网的发展提供动力，热情、积极、向上、不断进取是Liehuo.Net的座右铭，为网站设计、开发与运营提供动力！" /></a> <br /><br /> <a href="#" title="liehuo.net" target="_blank" onmouseover="tip.start(this)" tips="烈火提供互联网资讯与教程，是站长、程序员、网页设计师等交流与学习的网络平台，烈火一直坚持为互联网的发展提供动力，热情、积极、向上、不断进取是Liehuo.Net的座右铭，为网站设计、开发与运营提供动力！">烈火网提供站长教程、建站资源、网站运营等信息！</a> <div id="mjs:tip" class="tip" style="position:absolute;left:0;top:0;display:none;"></div> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' title="liehuo.net" target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：威海站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!