js文字链接的热点提示效果代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>小提示窗口</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<style> 
body{

font-size:12px;

} 
.tip{ 
color:red; 
text-decoration:none; 
position:relative; 
} 
.tip span {display:none;} 
.tip:hover {cursor:hand;} 
.tip:hover .popbox { 
display:block; 
position:absolute; 
top:15px; 
left:-30px; 
width:100px; 
background-color:#424242; 
color:#fff; 
padding:10px; 
} 
</style> 
</head> 
<body> 
<h1>CSS</h1> 
</p>W3C创建CSS标准的目的是以CSS取代<a href="http://www.glzy8.com" _ewebeditor_ta_href="http%3A%2F%2Fwww.glzy8.com" class="tip">HTML<span class="popbox">Hyper Text Mark-up Language 超文本标记语言</span></a>表格式布局、帧和其他表现的语言。纯CSS布局与结构式<a href="#" _ewebeditor_ta_href="%23" class="tip">XHTML<span class="popbox">The Extensible HyperText Markup Language 可扩展超文本标记语言</span></a>相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。</p> 
</body> 
</html>

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

教程首页更多教程