CSS模拟title和alt的提示效果

分析:在鼠标悬停的时候出现一个包含介绍文字的提示层,如果用传统的javascript来实现,就要设置对象的onmouseover和onmouseout属性,而如果把对象看作是a属性中的link和hover的话,这个问题就更清晰了,因为只要把对象的link属性设置为隐藏提示层、hover属性设置为呈现提示层即可,那么这个提示层的位置究竟在哪里呢?当然是在a标签中间了,目前常用的办法是把提示内容放在span标签中间进而包含在a标签内部,然后设置a:link和a:hover下不同的span样式即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
.info {position:relative;background:#fff;color:#666; text-decoration:none;font-size:12px;width:150px;text-align:center;border:1px solid #ccc;height:25px;line-height:25px;}
.info:hover {background:#eee;color:#333;}
.info span {display: none }
.info:hover span {display:block;position:absolute;top:30px;left:60px;width:130px;border:1px solid #ff0000; background:#fff; color:#000;padding:5px;text-align:left;}
</style>
</head>
<body>
<a class="info" href="http://www.koryi.net">www.koryi.net<span>欢迎每一位到访的朋友,非常希望能与网站设计爱好者们交流。</span></a>
<a class="info" href="http://www.koryi.net">www.koryi.net<span>欢迎每一位到访的朋友,非常希望能与网站设计爱好者们交流。</span></a>
<a class="info" href="http://www.koryi.net">www.koryi.net<span>欢迎每一位到访的朋友,非常希望能与网站设计爱好者们交流。</span></a>
<a class="info" href="http://www.koryi.net">www.koryi.net<span>欢迎每一位到访的朋友,非常希望能与网站设计爱好者们交流。</span></a>
<a class="info" href="http://www.koryi.net">www.koryi.net<span>欢迎每一位到访的朋友,非常希望能与网站设计爱好者们交流。</span></a>
</body>