首页 新闻 搜索 专区 学院

一个效果,请大家帮我改一下代码那里写错了

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>

 

 

 

xiaoleilei的主页 xiaoleilei | 初学一级 | 园豆:80
提问于:2014-07-18 14:19
< >
分享
最佳答案
0

position:absolute;

奖励园豆:5
逗号s | 初学一级 |园豆:4 | 2014-07-21 17:50
其他回答(2)
0

你要实现什么效果?

晓菜鸟 | 园豆:2594 (老鸟四级) | 2014-07-18 15:05

就是那张图片的效果啊!鼠标滑过就会出现蓝色的大框内容

支持(0) 反对(0) xiaoleilei | 园豆:80 (初学一级) | 2014-07-18 16:28
0

控制一下你弹出层的位置啊

Sweet Potato | 园豆:202 (菜鸟二级) | 2014-07-18 15:07
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册