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

*{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;}

<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><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1"   style="max-width:90%" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>                <p>植物类</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1972">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175679986599613.png" alt="爱图表">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1972">爱图表</a>
                            <p>AI驱动的智能化图表创作平台</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="爱图表">
                                <span>99</span>
                            </div>
                        </div>
                        <a href="/ai/1972" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="爱图表">
                        </a>
                    </div>
                            </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><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1"   style="max-width:90%" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</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>

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