JS练习嵌套列表（for循环）_html/css_WEB-ITnose

CSS:

*{padding: 0;margin: 0;}ul,li{list-style: none;}.cont{    width: 600px;    margin:30px auto;}.cont h3{    border-bottom: 2px solid #bbb;    width: 100%;    height: 38px;}#ul1{    position: relative;    width: 100%;}#ul1>li{    float: left;    margin-top: 15px;    margin-left: 15px;    position: relative;}.pro{    width: 180px;    height: 200px;    overflow: hidden;}.pro img{    width: 180px;    height: 150px;    overflow: hidden;}.pro p{    text-align: center;}.hidden{    display: none;}.active{    width: 300px;    height: 120px;    padding: 10px;    overflow: hidden;    position: absolute;    top: -80px;    left: 20px;    display: block;    background: #eee;    border: 1px solid #ccc;    z-index: 1;}.active li{    color: #e4007e;     font-size: 14px;    padding-left: 12px;    height: 30px;    line-height: 30px;}/* 清除浮动 */.clearfix{    zoom: 1;}.clearfix:after{     content: '.';    height: 0;    display: block;    clear: both;    visibility: hidden;}

HTML:

<div class="cont">    <h3>最近更新</h3>    <ul id="ul1" class="clearfix">        <li>            <div class="pro">                <img  src="img/small.jpg" alt="JS练习嵌套列表（for循环）_html/css_WEB-ITnose" >                <p>开心一刻</p>                <p>动漫类</p>            </div>            <ul class="hidden">                <li>开不厌“坐不凡” 宝马全新730Li试驾快评</li>                <li>3D打印无法替代 汽车设计师如何玩泥巴？</li>                <li>比亚迪元换装个性LOGO 瞬间高大上了许多</li>            </ul>        </li>        <li>            <div class="pro">                <img  src="img/small-02.jpg" alt="JS练习嵌套列表（for循环）_html/css_WEB-ITnose" >                <p>盆景养成记</p>                <p>植物类</p>            </div>            <ul class="hidden">                <li>开不厌“坐不凡” 宝马全新730Li试驾快评</li>                <li>3D打印无法替代 汽车设计师如何玩泥巴？</li>                <li>比亚迪元换装个性LOGO 瞬间高大上了许多</li>            </ul>        </li>        <li>            <div class="pro">                <img  src="img/small-03.jpg" alt="JS练习嵌套列表（for循环）_html/css_WEB-ITnose" >                <p>盆景养成记</p>                <p>植物类</p>            </div>            <ul class="hidden">                <li>开不厌“坐不凡” 宝马全新730Li试驾快评</li>                <li>3D打印无法替代 汽车设计师如何玩泥巴？</li>                <li>比亚迪元换装个性LOGO 瞬间高大上了许多</li>            </ul>        </li>        <li>            <div class="pro">                <img  src="img/small-04.jpg" alt="JS练习嵌套列表（for循环）_html/css_WEB-ITnose" >                <p>插花艺术</p>                <p>艺术类</p>            </div>            <ul class="hidden">                <li>开不厌“坐不凡” 宝马全新730Li试驾快评</li>                <li>3D打印无法替代 汽车设计师如何玩泥巴？</li>                <li>比亚迪元换装个性LOGO 瞬间高大上了许多</li>            </ul>        </li>        <li>            <div class="pro">                <img  src="img/small-05.jpg" alt="JS练习嵌套列表（for循环）_html/css_WEB-ITnose" >                <p>插花艺术</p>                <p>艺术类</p>            </div>            <ul class="hidden">                <li>开不厌“坐不凡” 宝马全新730Li试驾快评</li>                <li>3D打印无法替代 汽车设计师如何玩泥巴？</li>                <li>比亚迪元换装个性LOGO 瞬间高大上了许多</li>            </ul>        </li>        <li>            <div class="pro">                <img  src="img/small-06.jpg" alt="JS练习嵌套列表（for循环）_html/css_WEB-ITnose" >                <p>开心一刻</p>                <p>动漫类</p>            </div>            <ul class="hidden">                <li>开不厌“坐不凡” 宝马全新730Li试驾快评</li>                <li>3D打印无法替代 汽车设计师如何玩泥巴？</li>                <li>比亚迪元换装个性LOGO 瞬间高大上了许多</li>            </ul>        </li>    </ul></div>

JS:

<script type="text/javascript">    var oUl1=document.getElementById('ul1');    var aUl=oUl1.getElementsByTagName('ul');//ul数组    var aDiv=oUl1.getElementsByTagName('div');    for (var i = 0; i < aDiv.length; i++) {        aDiv[i].index=i;//索引值        //鼠标经过当前div时，当前li下的div内容显示        aDiv[i].onmouseover=function(){            aUl[this.index].className='active';        }        //鼠标离开当前div时，当前li下的div内容隐藏        aDiv[i].onmouseout=function(){            aUl[this.index].className='hidden';        }    };</script>