鼠标悬停透明，困扰了我几个月的问题，一直没查到怎么解决，呼唤高手。
<!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=gb2312 " />
<title> www.52css.com </title>
<style type= "text/css ">
* {
font-size:12px;
}
.tip{
position:relative;
color:#00c;
text-decoration:none;
}
.tip:hover{
background:none;
color:#000;
}
.tip span {
display: none;
}
.tip:hover span{
display:block;
position:absolute;top:26px;left:10px;
border-bottom:2px solid #eee;
border-right:2px solid #eee;
}
.tip:hover span p {
color:#f60;
text-align:left;
padding:5px;
border:1px solid #ccc;
backgrouid #fff;
}
</style>
</head>
<body>
<div>
<a class= "tip " href= "# "> Div+CSS教程 <span> <p> 52CSS.com Div+CSS教程 </p> </span> </a>
<a class= "tip " href= "# "> CSS布局实例 <span> <p> 52CSS.com CSS布局实例 </p> </span> </a>
<a class= "tip " href= "# "> CSS2.0教程 <span> <p> 52CSS.com CSS2.0教程 </p> </span> </a>
<a class= "tip " href= "# "> CSS酷站欣赏 <span> <p> 52CSS.com CSS酷站ggggggggggggggggggggggggggggggggggggggggggggggggggg欣赏 </p> </span> </a>
<a class= "tip " href= "# "> CSS模板下载 <span> <p> 52CSS.com CSS模板下载 </p> </span> </a>
</div>
<div>
<a class= "tip " href= "# "> Div+CSS教程 <span> <p> 52CSS.com Div+CSS教程 </p> </span> </a>
<a class= "tip " href= "# "> CSS布局实例 <span> <p> 52CSS.com CSS布局实例 </p> </span> </a>
<a class= "tip " href= "# "> CSS2.0教程 <span> <p> 52CSS.com CSS2.0教程 </p> </span> </a>
<a class= "tip " href= "# "> CSS酷站欣赏 <span> <p> 52CSS.com CSS酷站ggggggggggggggggggggggggggggggggggggggggggggggggggg欣赏 </p> </span> </a>
<a class= "tip " href= "# "> CSS模板下载 <span> <p> 52CSS.com CSS模板下载 </p> </span> </a>
</div>
<div>
<a class= "tip " href= "# "> Div+CSS教程 <span> <p> 52CSS.com Div+CSS教程 </p> </span> </a>
<a class= "tip " href= "# "> CSS布局实例 <span> <p> 52CSS.com CSS布局实例 </p> </span> </a>
<a class= "tip " href= "# "> CSS2.0教程 <span> <p> 52CSS.com CSS2.0教程 </p> </span> </a>
<a class= "tip " href= "# "> CSS酷站欣赏 <span> <p> 52CSS.com CSS酷站ggggggggggggggggggggggggggggggggggggggggggggggggggg欣赏 </p> </span> </a>
<a class= "tip " href= "# "> CSS模板下载 <span> <p> 52CSS.com CSS模板下载 </p> </span> </a>
</div>
<div>
<a class= "tip " href= "# "> Div+CSS教程 <span> <p> 52CSS.com Div+CSS教程 </p> </span> </a>
<a class= "tip " href= "# "> CSS布局实例 <span> <p> 52CSS.com CSS布局实例 </p> </span> </a>
<a class= "tip " href= "# "> CSS2.0教程 <span> <p> 52CSS.com CSS2.0教程 </p> </span> </a>
<a class= "tip " href= "# "> CSS酷站欣赏 <span> <p> 52CSS.com CSS酷站ggggggggggggggggggggggggggggggggggggggggggggggggggg欣赏 </p> </span> </a>
<a class= "tip " href= "# "> CSS模板下载 <span> <p> 52CSS.com CSS模板下载 </p> </span> </a>
</div>
<div>
<a class= "tip " href= "# "> Div+CSS教程 <span> <p> 52CSS.com Div+CSS教程 </p> </span> </a>
<a class= "tip " href= "# "> CSS布局实例 <span> <p> 52CSS.com CSS布局实例 </p> </span> </a>
<a class= "tip " href= "# "> CSS2.0教程 <span> <p> 52CSS.com CSS2.0教程 </p> </span> </a>
<a class= "tip " href= "# "> CSS酷站欣赏 <span> <p> 52CSS.com CSS酷站ggggggggggggggggggggggggggggggggggggggggggggggggggg欣赏 </p> </span> </a>
<a class= "tip " href= "# "> CSS模板下载 <span> <p> 52CSS.com CSS模板下载 </p> </span> </a>
</div>
<div>
<a class= "tip " href= "# "> Div+CSS教程 <span> <p> 52CSS.com Div+CSS教程 </p> </span> </a>
<a class= "tip " href= "# "> CSS布局实例 <span> <p> 52CSS.com CSS布局实例 </p> </span> </a>
<a class= "tip " href= "# "> CSS2.0教程 <span> <p> 52CSS.com CSS2.0教程 </p> </span> </a>
<a class= "tip " href= "# "> CSS酷站欣赏 <span> <p> 52CSS.com CSS酷站ggggggggggggggggggggggggggggggggggggggggggggggggggg欣赏 </p> </span> </a>
<a class= "tip " href= "# "> CSS模板下载 <span> <p> 52CSS.com CSS模板下载 </p> </span> </a>
<a class= "tip " href= "# "> <img src= "qu/full.png " width= "15 " height= "15 " border= "0 " /> <span> <p> 52CSS.com CSS模板下载 </p> </span> </a> </div>
</body>
</html>
请问怎么让鼠标移上去显示的内容不透明呀 现在因为透明都看不清了呀 谢谢各位。
[解决办法]
貌似在这种结构下无解，要是我就只能改变文档结构了
[解决办法]
几个问题造成你目前的状况
1. </span> 写成了 < /span>
2.background:写成了backgrouid
3.span放在 <a> 的内容后面，它应该加上z-index值才能置于这个内容的面上
<!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=gb2312 " />
<title> www.52css.com </title>
<style type= "text/css ">
* {
font-size:12px;
}
.tip{
position:relative;
color:#00c;
text-decoration:none;
}
.tip:hover{
background:#fff;
color:#000;
}
.tip span {
display: none;
}
.tip:hover span{
z-index:99;
display:block;
background:#fff;
position:absolute;top:26px;left:10px;
border-bottom:2px solid #eee;
border-right:2px solid #eee;
}
.tip:hover span p {
color:#f60;
text-align:left;
padding:5px;
border:1px solid #ccc;
background:#fff;
}
</style>
</head>
<body>
<div>
<a class= "tip " href= "# "> Div+CSS教程 <span> <p> 52CSS.com Div+CSS教程 </p> </span> </a>
<a class= "tip " href= "# "> CSS布局实例 <span> <p> 52CSS.com CSS布局实例 </p> </span> </a>
<a class= "tip " href= "# "> CSS2.0教程 <span> <p> 52CSS.com CSS2.0教程 </p> </span> </a>
<a class= "tip " href= "# "> CSS酷站欣赏 <span> <p> 52CSS.com CSS酷站ggggggggggggggggggggggggggggggggggggggggggggggggggg欣赏 </p> </span> </a>
<a class= "tip " href= "# "> CSS模板下载 <span> <p> 52CSS.com CSS模板下载 </p> </span> </a>
</div>
<div>
<a class= "tip " href= "# "> Div+CSS教程 <span> <p> 52CSS.com Div+CSS教程 </p> </span> </a>
<a class= "tip " href= "# "> CSS布局实例 <span> <p> 52CSS.com CSS布局实例 </p> </span> </a>
<a class= "tip " href= "# "> CSS2.0教程 <span> <p> 52CSS.com CSS2.0教程 </p> </span> </a>
<a class= "tip " href= "# "> CSS酷站欣赏 <span> <p> 52CSS.com CSS酷站ggggggggggggggggggggggggggggggggggggggggggggggggggg欣赏 </p> </span> </a>
<a class= "tip " href= "# "> CSS模板下载 <span> <p> 52CSS.com CSS模板下载 </p> </span> </a>
</div>
<div>
<a class= "tip " href= "# "> Div+CSS教程 <span> <p> 52CSS.com Div+CSS教程 </p> </span> </a>
<a class= "tip " href= "# "> CSS布局实例 <span> <p> 52CSS.com CSS布局实例 </p> </span> </a>
<a class= "tip " href= "# "> CSS2.0教程 <span> <p> 52CSS.com CSS2.0教程 </p> </span> </a>
<a class= "tip " href= "# "> CSS酷站欣赏 <span> <p> 52CSS.com CSS酷站ggggggggggggggggggggggggggggggggggggggggggggggggggg欣赏 </p> </span> </a>
<a class= "tip " href= "# "> CSS模板下载 <span> <p> 52CSS.com CSS模板下载 </p> </span> </a>
</div>
<div>
<a class= "tip " href= "# "> Div+CSS教程 <span> <p> 52CSS.com Div+CSS教程 </p> </span> </a>
<a class= "tip " href= "# "> CSS布局实例 <span> <p> 52CSS.com CSS布局实例 </p> </span> </a>
<a class= "tip " href= "# "> CSS2.0教程 <span> <p> 52CSS.com CSS2.0教程 </p> </span> </a>
<a class= "tip " href= "# "> CSS酷站欣赏 <span> <p> 52CSS.com CSS酷站ggggggggggggggggggggggggggggggggggggggggggggggggggg欣赏 </p> </span> </a>
<a class= "tip " href= "# "> CSS模板下载 <span> <p> 52CSS.com CSS模板下载 </p> </span> </a>
</div>
<div>
<a class= "tip " href= "# "> Div+CSS教程 <span> <p> 52CSS.com Div+CSS教程 </p> </span> </a>
<a class= "tip " href= "# "> CSS布局实例 <span> <p> 52CSS.com CSS布局实例 </p> </span> </a>
<a class= "tip " href= "# "> CSS2.0教程 <span> <p> 52CSS.com CSS2.0教程 </p> </span> </a>
<a class= "tip " href= "# "> CSS酷站欣赏 <span> <p> 52CSS.com CSS酷站ggggggggggggggggggggggggggggggggggggggggggggggggggg欣赏 </p> </span> </a>
<a class= "tip " href= "# "> CSS模板下载 <span> <p> 52CSS.com CSS模板下载 </p> </span> </a>
</div>
<div>
<a class= "tip " href= "# "> Div+CSS教程 <span> <p> 52CSS.com Div+CSS教程 </p> </span> </a>
<a class= "tip " href= "# "> CSS布局实例 <span> <p> 52CSS.com CSS布局实例 </p> </span> </a>
<a class= "tip " href= "# "> CSS2.0教程 <span> <p> 52CSS.com CSS2.0教程 </p> </span> </a>
<a class= "tip " href= "# "> CSS酷站欣赏 <span> <p> 52CSS.com CSS酷站ggggggggggggggggggggggggggggggggggggggggggggggggggg欣赏 </p> </span> </a>
<a class= "tip " href= "# "> CSS模板下载 <span> <p> 52CSS.com CSS模板下载 </p> </span> </a>
<a class= "tip " href= "# "> <img src= "qu/full.png " width= "15 " height= "15 " border= "0 " /> <span> <p> 52CSS.com CSS模板下载 </p> </span> </a> </div>
</body>
</html>
[解决办法]
<style>
body { font:verdena; font-size:14px; color:#000 }
h1{ font:verdena; font-size:22px; color:#000 }
h2{ font:verdena; font-size:15px; color:#000; text-align:left }
div#main { margin:30 }
/*关键代码开始*/
a.info {
position:relative; z-index:0; background-color:#ccc; color:#000; text-decoration:none }
a.info:hover {
z-index:1; background-color:#ff0 }
a.info span {
display: none }
a.info:hover span { display:block; position:absolute; top:25px; left:60px; width:130px; border:1px solid #0cf; background-color:#cff; color:#000; text-align: center }
/*关键代码结束*/
</style>
<body>
<div id= "main ">
<h1> 单纯使用CSS实现动态提示信息 </h1>
<h1> 不用js可以实现信息提示效果?!(title和alt除外) </h1>
<h2> By [51js.com]zdzhuo </h2>
<h2> Ie5.5+, Opera7.0, Netscap7.0, Mozilla1.4 都能正常使用 </h2>
<br> <a class= "info " href= "javascript:; "> <b> 这是提示信息 </b> <span> www.51js.com </span> </a> 不需要js就能实现的提示信息 <a class= "info " href= "javascript:; "> <b> 单纯使用CSS实现提示信息 </b> <span> 一个非常简便的方法 <br> 原理也浅显易懂 </span> </a>
<br> <a class= "info " href= "javascript:; "> <b> 这是提示信息 </b> <span> www.51js.com </span> </a> 不需要js就能实现的提示信息 <a class= "info " href= "javascript:; "> <b> 单纯使用CSS实现提示信息 </b> <span> 一个非常简便的方法 <br> 原理也浅显易懂 </span> </a>
<br> <a class= "info " href= "javascript:; "> <b> 这是提示信息 </b> <span> www.51js.com </span> </a> 不需要js就能实现的提示信息 <a class= "info " href= "javascript:; "> <b> 单纯使用CSS实现提示信息 </b> <span> 一个非常简便的方法 <br> 原理也浅显易懂 </span> </a>
<br> <a class= "info " href= "javascript:; "> <b> 这是提示信息 </b> <span> www.51js.com </span> </a> 不需要js就能实现的提示信息 <a class= "info " href= "javascript:; "> <b> 单纯使用CSS实现提示信息 </b> <span> 一个非常简便的方法 <br> 原理也浅显易懂 </span> </a>
</div>
</body>
今天偶尔看到的代码，发现原理是一样的，貌似解决了楼主的问题
