ToolTip通過Js實現代替超鏈接中的title效果_javascript技巧

來源：懂視網責編：小采時間：2020-11-27 20:59:04

ToolTip通過Js實現代替超鏈接中的title效果_javascript技巧

ToolTip通過Js實現代替超鏈接中的title效果_javascript技巧: 自定義Tooltip特效 body ul { list-style: none; } body li { margin: 60px; } div { border: 1px solid #CCC; padding: 10px; background: #dff5ff; margin-left: 30px; } function init

推薦度：

點擊下載本文 文檔為doc格式

導讀ToolTip通過Js實現代替超鏈接中的title效果_javascript技巧: 自定義Tooltip特效 body ul { list-style: none; } body li { margin: 60px; } div { border: 1px solid #CCC; padding: 10px; background: #dff5ff; margin-left: 30px; } function init

<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()"> 
 
<li>百度</li> 
<li>騰訊</li> 
<li>新浪</li> 
<li>搜狐</li> 
 
</body> 
</html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

ToolTip通過Js實現代替超鏈接中的title效果_javascript技巧

推薦度：

點擊下載本文 文檔為doc格式

標簽： js javascript Tooltip

熱門焦點

ToolTip通過Js實現代替超鏈接中的title效果_javascript技巧

ToolTip通過Js實現代替超鏈接中的title效果_javascript技巧

ToolTip通過Js實現代替超鏈接中的title效果_javascript技巧

最新推薦

猜你喜歡

熱門推薦