其实并不想写这篇文章滴，已经不好玩了。因为之前已经写过一篇类似的文章（纯CSS构造Tips效果），如果需要其它的Tips效果应该都可以在那个基础之上略做修改或扩展。
不过这段时间还是有不少同学问，已经给出原型了，可是。。。
再整一篇，全当是骗点流量：）
［效果演示：http://www.doyoe.com/model/xhtmlcss/style/tips/tips2.htm］
CSS部分：
.dytips {
margin:50px;
padding:0;
list-style:none;
font:12px/180% "宋体";
}
.dytips a {
position:relative;
text-decoration:none;
color:#333;
background:#fff;
}
.dytips a span {
display:none;
}
.dytips a:hover {
color:#fff;
background:#050;
}
.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;
}
XHTML部分：
<!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>
</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>
发表于 @ 2008年03月12日 15:09:00|评论(loading...)|编辑