JS exercises-nested list (for loop), js nesting

JS exercises-nested list (for loop), js nesting

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;}/* clear floating */. clearfix {zoom: 1 ;}. clearfix: after {content :'. '; height: 0; display: block; clear: both; visibility: hidden ;}

HTML:

<Div class = "cont"> 
JS:
<Script type = "text/javascript"> var oUl1 = document. getElementById ('ul1'); var aUl = oUl1.getElementsByTagName ('ul '); // ul array var aDiv = oUl1.getElementsByTagName ('div'); for (var I = 0; I <aDiv. length; I ++) {aDiv [I]. index = I; // index value // when the cursor passes through the current div, The div content under the current li displays aDiv [I]. onmouseover = function () {aUl [this. index]. className = 'active';} // when the mouse leaves the current div, The div content under the current li hides aDiv [I]. onmouseout = function () {aUl [this. index]. className = 'ddn' ;}}; </script>