您的位置：首页 > Web前端 > HTML

关于html中 ul li 中加入div（div位置随意设置）的问题

2015-10-09 19:22 471 查看

<!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>

<script src="jquery.js"></script>

<style type="text/css">

#apDiv1 {

position:relative;

left:20px;

top:42px;

width:487px;

height:639px;

}

#apDiv1 ul li {

list-style-type: none;

}

.apDiv2 {

/* li中的div要设置成绝对，这样，因为ul和li没有设置定位（绝对或相对，默认static），li中的div是相对于最外层的div(#apDiv1)，此时此div的位置并不受ul 和li的影响，三个div会重叠到一起*/

position:absolute;

left:161px;

top:20px;

width:195px;

height:211px;

display:none;

z-index:2;

}

* {

border: 1px solid #F00;

}

div {

border: 1px solid #999;

}

</style>

</head>

<body>

<div id="apDiv1">

<ul>

<li>1111<div class="apDiv2">111</div></li>

<li>2222<div class="apDiv2">2222</div></li>

<li>3333<div class="apDiv2">3333</div></li>

</ul>

</div>

<script>

$(function(){

$("li").hover(function(){

var index=$("li").index($(this));

$(".apDiv2").eq(index).css({"display":"block"});

},

function(){

var index=$("li").index($(this));

$(".apDiv2").eq(index).css({"display":"none"});

}

);

});

</script>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航