软件开发培训班 >> 编程开发 >> JavaScript

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

　　本文标签：超链接,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>百度</li> 
<li>腾讯</li> 
<li>新浪</li> 
<li>搜狐</li> 
</ul> 
</body> 
</html>

技术文章快速查找

Jquery中LigerUi的弹出编辑框(实现方法)

JS获取鼠标坐标、获取鼠标像素点示例

Ubuntu中搭建Nodejs开发环境过程分享

js 设置缓存及获取设置的缓存

高性能Javascript笔记数据的存储与访问性能优化

从csdn弄下来的页面预先载入效果

教您去掉ie网页加载进度条的方法

汉化英文版的Dreamweaver CS5并自动提示jquery

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建