<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>页面标题</title>
<style>
/*设置链接的属性,一定要设置为relative才能使提示层跟着链接走*/
.info {
position:relative;background:#fff;color:#666;text-decoration:none;font-size:12px;width:150px;padding:5px;text-align:center;border:1px solid#ccc;height:25px;line-height:25px;
}
.info:hover {background:#eee;color:#333;}
.info span {display: none }/*设置正常下的span为隐藏状态*/
/*设置hover下的span属性为呈现状态,并设置提示层的位置*/
.info:hover span{
display:block;position:absolute;top:35px;left:50px;width:130px;border:1px solid #ff0000;background:#fff;color:#000;padding:5px;text-align:left;
}
</style>
</head>
<body>
<a class="info" href="http://www.baidu.com">百度<span>显示百度了吗?</span></a>
<a class="info" href="http://www.360doc.com">360doc<span>欢迎进入360图书馆，错了，好像不是360的</span></a>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
