代码描述:JavaScript 鼠标 连接 提示框效果。JavaScript鼠标放在连接上出现提示框效果
鼠标放在一个链接上的时候,可能会出现一个提示框,当然这个提示框可以是自带的,也可以是自定义的。 一.自带的提示框:
<script> <a href="http://www.51qianduan.com" title="只有奋斗才会有美好的明天">51前端</a> </script>
当鼠标放在链接上的时候也会出现提示框效果。在链接中设置title属性即可实现,不过美观度实在是难以令人满意。 二.自定义提示框:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51qianduan.com/" /> <title>51前端</title> <style type="text/css"> * { margin:0px; padding:0px; } ul{ list-style:none; margin:50px; } ul li{ float:left; width:100px; height:40px; margin-left:5px; } ul li a{ width:100px; height:40px; display:block; line-height:40px; background-color:#666; text-align:center; text-decoration:none; color:red; } </style> <script type="text/javascript"> window.onload=function(){ var obox=document.getElementById("box"); ali=obox.getElementsByTagName("a"); var odiv=document.createElement("div"); obox.appendChild(odiv); odiv.style.width="100px"; odiv.style.height="50px"; odiv.style.backgroundColor="green"; odiv.style.position="absolute"; odiv.style.display="none"; for(var i=0;i<ali.length;i++){ ali[i].onmousemove=function(ev){ var ev=window.event||ev; var xy=20; odiv.style.display="block"; odiv.style.top=(ev.clientY+xy)+"px"; odiv.style.left=(ev.clientX+xy)+"px"; } ali[i].onmouseout = function (){ odiv.style.display="none"; } } } </script> </head> <body> <ul id="box"> <li><a href="#">51前端</a></li> <li><a href="#">51前端</a></li> <li><a href="#">51前端</a></li> </ul> </body> </html>
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能