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模拟实现简单的MVC的示例详解
MVC是一种常见的软件架构模式，MVC模式的目的是将应用程序的数据、用户界面和控制逻辑分离，提高代码的可维护性，可拓展性和可重用性。本文就来用用JS模拟实现一个简单的MVC吧
2023-04-04
layui前端框架之table表数据的刷新方法
今天小编就为大家分享一篇layui前端框架之table表数据的刷新方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
javascript中with()方法的语法格式及使用
有了 With 语句，在存取对象属性和方法时就不用重复指定参考对象，下面为大家介绍下With 语句的语法格式及使用
2014-08-08
iframe自适应宽度、高度 ie6 7 8，firefox 3.86下测试通过
近期需要一个iframe自适应高度的东西，在网上找了很多，都不能用……一看大体的日期都是大概 2008年前后的其他近期的基本都是以前的转载，所以只好自己动手了。
2010-07-07
一文详解JavaScript中prototype的使用
这篇文章主要为大家详细介绍一下JavaScript中prototype的使用，文中的示例代码讲解详细，对我们学习有一定帮助，需要的可以参考一下
2022-05-05
javascript实现页面内关键词高亮显示代码
关键词高亮想必大家对它都不陌生吧，应用也比较广泛的，下面为大家介绍下通过javascript是如何实现页面内关键词高亮显示
2014-04-04
JavaScript中获取纯正的undefined的方法
这篇文章主要介绍了JavaScript中获取纯正的undefined的方法的相关资料,需要的朋友可以参考下
2016-03-03
JavaScript算法面试题
这篇文章主要给大家分享的是JavaScript算法面试题汇总，文章举例清晰内容详细，具有一定的参考价值，需要的小伙伴可以参考一下
2022-04-04
javascript sort()对数组中的元素进行排序详解
在本篇文章里小编给大家整理是一篇关于javascript sort()对数组中的元素进行排序的相关知识点内容，需要的朋友们学习下。
2019-10-10
一篇文章教你JS函数继承
这篇文章主要介绍了js继承方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-09-09