ToolTip 通过Js实现代替超链接中的title效果

ttx9n · 发表于 2011-4-25 01:20:42

ToolTip 通过Js实现代替超链接中的title效果，需要的朋友可以参考下。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>自定义Tooltip特效</title> <style type="text/css"> body ul { list-style: none; } body li { margin: 60px; } div { border: 1px solid #CCC; padding: 10px; background: #dff5ff; margin-left: 30px; } </style>  <script language="javascript" type="text/javascript"> function initEvent() { var links = document.getElementsByTagName("a"); for (var i = 0; i < links.length; i++) { var link = links[i]; link.onmouseover = linkOnMouseOver; link.onmouseout = linkOnMouseOut; } } function linkOnMouseOver() { var newdiv = document.createElement("div"); newdiv.className = "Tooltip"; newdiv.style.position = "absolute"; newdiv.style.top = window.event.clientY; newdiv.style.left = window.event.clientX; newdiv.innerHTML = "我是自定义的Tooltip，用来代替超链接中的title"; document.body.appendChild(newdiv); } function linkOnMouseOut() { var divs = document.getElementsByTagName("div"); for (var i = 0; i < divs.length; i++) { var newdiv = divs[i]; if (newdiv.className == "Tooltip") { document.body.removeChild(newdiv); } } } </script> </head> <body onload="initEvent()"> <ul> <li><a href="#" title="百度搜索引擎" target="_blank">百度</a></li> <li><a href="#" title="今天你山寨了吗？" target="_blank">腾讯</a></li> <li><a href="#" title="新浪微博" target="_blank">新浪</a></li> <li><a href="#" title="搜你输入法真好用" target="_blank">搜狐</a></li> </ul> </body> </html>
[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

i1efp6c · 发表于 2022-8-25 01:28:58

刷屏刷屏刷屏

e8hwl6prw · 发表于 2022-9-8 01:57:54

哈哈哈哈哈哈哈

5cf304mn2 · 发表于 2022-9-19 21:57:04

哟哟哟哟哟以偶

errol123 · 发表于 2023-8-18 05:36:28

啦啦啦啦啦啦哈哈哈

fzyzy · 发表于 2023-11-12 10:49:49

可以，看卡巴

pwseqn1h · 发表于 2024-1-24 14:22:16

好人好人好人好人

.l4 · 发表于 2024-3-14 00:46:03

啊啊啊啊啊啊啊啊啊啊啊啊啊啊

feiyasqhr · 发表于 2024-7-27 00:20:27

收下来看看怎么样

e5plu · 发表于 2024-9-8 00:34:22

hi哦回复iOS就看见

账号		自动登录	找回密码
密码			立即注册

[JavaScript] ToolTip 通过Js实现代替超链接中的title效果

相关帖子