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

更新时间：2011年04月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需再刷新一下页面才能执行]

您可能感兴趣的文章:

javascript改变this指向的方法汇总
这篇文章主要介绍了javascript改变this指向的方法汇总的相关资料,需要的朋友可以参考下
2022-09-09
js 开发之autocomplete="off"在chrom中失效的解决办法
这篇文章主要介绍了js 开发之autocomplete="off"在chrom中失效的解决办法的相关资料,希望通过本文能帮助到大家，解决遇到这样的问题，需要的朋友可以参考下
2017-09-09
js键盘事件的keyCode
本节主要介绍了js键盘事件的keyCode，在你按下键时会弹出它的键码,需要的朋友可以参考下
2014-07-07
一文了解TypeScript数据类型
本文主要介绍了TypeScript数据类型，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-07-07
JS面向对象编程基础篇（二）封装操作实例详解
这篇文章主要介绍了JS面向对象编程封装操作,结合实例形式详细分析了JS面向对象封装操作的相关概念、原理、使用方法与操作注意事项,需要的朋友可以参考下
2020-03-03
JavaScrip报错:module is not defined的原因及解决
这篇文章主要给大家介绍了关于JavaScrip报错:module is not defined的原因及解决方法,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-09-09
JS ES新特性扩展运算符介绍
这篇文章主要介绍了JS ES新特性扩展运算符，下面文章围绕ES新特性扩展运算符的相关资料展开详细内容,需要的朋友可以参考一下，希望对大家有所帮助
2021-12-12
js判断手机是否安装并打开app，未安装则安装app【兼容Android、ios,亲测可用】
这篇文章主要介绍了js判断手机是否安装并打开app,未安装则安装app,通过调用浏览器判断app,兼容Android、ios等系统,,需要的朋友可以参考下
2023-05-05
JavaScript检查变量类型的常用方法
在 JavaScript 开发中,变量类型的检查是一个常见且重要的需求,无论是调试还是数据校验,了解变量的类型可以帮助我们编写更加健壮的代码,本文将详细讲解 JavaScript 中用于检查变量类型的多种方法,并分析它们的优缺点以及适用场景
2025-04-04
JavaScript操作XML文件之XML读取方法
这篇文章主要介绍了JavaScript操作XML文件之XML读取方法,涉及javascript操作XML文件的相关技巧,需要的朋友可以参考下
2015-06-06

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具