css提示小窗口
用到的主知识点：
层的定位
演示地址：
http://www.vkill.net/demo/css_info/css_info.html
代码：
<html>
<head>
<title>css提示小窗口之一方法</title>
<style type="text/css">
a.info {
position:relative; /*这个是关键*/
text-decoration:none;
}
a.info span {
display:none;
}
a.info:hover {
background:none; /*IE中必须要,firefox不需要*/
z-index:1;
}
a.info:hover span {
display:block;
position:absolute;
top:20px;
left:10px;
border:1px solid #ff0000;
background-color:#CCFFFF;
color:#000000;
z-index:2;
width:100px;
}
</style>
</head>
<body>
<p><a class="info" href="#">css<span>这个是对css的解释</span></a>是xxx的简称</p>
<p>aaaaa<a class="info" href="#">aaa<span>这个是对aaa的解释</span></a>aaaaaaa</p>
<p><a href="#">我就不提示</a></p>
</body>
</html>
Last modified by vkill on2008/11/08 09:23
用到的主知识点：
层的定位
演示地址：
http://www.vkill.net/demo/css_info/css_info.html
代码：
<html>
<head>
<title>css提示小窗口之一方法</title>
<style type="text/css">
a.info {
position:relative; /*这个是关键*/
text-decoration:none;
}
a.info span {
display:none;
}
a.info:hover {
background:none; /*IE中必须要,firefox不需要*/
z-index:1;
}
a.info:hover span {
display:block;
position:absolute;
top:20px;
left:10px;
border:1px solid #ff0000;
background-color:#CCFFFF;
color:#000000;
z-index:2;
width:100px;
}
</style>
</head>
<body>
<p><a class="info" href="#">css<span>这个是对css的解释</span></a>是xxx的简称</p>
<p>aaaaa<a class="info" href="#">aaa<span>这个是对aaa的解释</span></a>aaaaaaa</p>
<p><a href="#">我就不提示</a></p>
</body>
</html>
Last modified by vkill on2008/11/08 09:23
网友评论(0)：
