CODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Author" content="Doyoe, 飘零雾雨, edzmaster@gmail.com" />
<title>纯CSS构造Tips效果补遗</title>
<style type="text/css">
.dytips {
margin:50px;
padding:0;
list-style:none;
font:12px/180% "宋体";
}
.dytips a {
position:relative;
color:#333;
background:#fff;
}
.dytips a span {
display:none;
}
.dytips a:hover {
color:#fff;
background:#050;
text-decoration:none;
}
.dytips a:hover span {
display:block;
white-space:nowrap;
padding:3px 5px;
border:1px solid #19555f;
color:#00456c;
background:#eef8fe;
position:absolute;
z-index:99;
left:90px;
top:0px;
}
</style>
</head>
<body>
<h3>请将鼠标移动到以下链接上：</h3>
<ul class="dytips">
<li><a href="#">传说中的测试1
<span>我悄悄地</span></a>
</li>
<li><a href="#">传说中的测试2
<span>我悄悄地走</span></a>
</li>
<li><a href="#">传说中的测试3
<span>我悄悄地走过</span></a>
</li>
<li><a href="#">传说中的测试4
<span>我悄悄地走过你<br />你不动声色</span></a>
</li>
</ul>
</body>
</html