一个效果，请大家帮我改一下代码那里写错了
0
[已解决问题]
解决于 2014-07-22 10:16
大家帮忙看一下这个效果怎么做，下面是我写的JQ代码，可是鼠标滑过，他把每个表单压住了，怎么解决呢？
<!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=utf-8" />
<title>无标题文档</title>
<style>
*{ margin:0; padding:0}
/*基本设置*/
body{margin:0;padding:0;font-size:12px;font-family:Arial,"宋体";backgorund:#fff;}/*文档清零,字体,字号,背景设置.*/
div,ul,li,p,form,h1,h2,h3,h4,h5,input,dl,dt,dd,fieldset,table,tr,td{margin:0;padding:0;}/*边界元素清零*/
ul,li,ol{list-style:none;}/*去除列表符号*/
img{border:none;}/*去除图片按钮边框*/
a{text-decoration:none;}/*去除超链接下划线*/
img,input,textarea{vertical-align:middle;}
.wrap{ width:600px; height:1000px; margin:20px auto}
.wrap dl{ height:60px; width:500px; margin-bottom:10px;
border:1px solid #333; line-height:60px; font-size:18px;}
.title{height:60px; width:500px;}
.blocks{ width:500px; height:123px;border:1px solid #6C9; color:#fff;
background:#6C9; position:relative;z-index:99999; left:-1px; top:-61px; display:none}
</style>
</head>
<body>
<ul class="wrap">
<dl>
<li class="title">媒体资源库</li>
<div class="blocks">媒体资源库媒体资源库媒
体资源库媒体资源库媒体资源库媒体资源库媒体资源库媒体资源库媒体资源库
</div>
</dl>
<dl>
<li class="title">媒体资源库</li>
<div class="blocks">体资源库媒体资源库媒体资源库媒体资源库媒体资源库媒体资源库媒体资源库</div>
</dl>
<dl>
<li class="title">媒体资源库</li>
<div class="blocks">媒体资源库媒体资源库媒
体资源库媒体资源库媒体资源库媒体资源库媒体资源库媒体资源库媒体资源库
</div>
</dl>
<dl>
<li class="title">媒体资源库</li>
<div class="blocks">体资源库媒体资源库媒体资源库媒体资源库媒体资源库媒体资源库媒体资源库</div>
</dl>
<dl>
<li class="title">媒体资源库</li>
<div class="blocks">媒体资源库媒体资源库媒
体资源库媒体资源库媒体资源库媒体资源库媒体资源库媒体资源库媒体资源库
</div>
</dl>
<dl>
<li class="title">媒体资源库</li>
<div class="blocks">体资源库媒体资源库媒体资源库媒体资源库媒体资源库媒体资源库媒体资源库</div>
</dl>
</ul>
</body>
</html>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script>
$(document).ready(function() {
$("dl").each(function(i){
$(this).mouseover(function(){
$(".blocks").hide();
$(".blocks").eq(i).show();
}).mouseleave(function(){
$(".blocks").hide();
})
})
});
</script>
最佳答案
0
position:absolute;
奖励园豆：5
其他回答(2)
0
你要实现什么效果？
就是那张图片的效果啊！鼠标滑过就会出现蓝色的大框内容
0
控制一下你弹出层的位置啊
