<style> *{margin: 0; padding: 0} .outer{ width: 240px; margin: 10px auto; background: #f0f0f0; padding: 10px 0px 10px 10px; /* 下面li的内容撑不起outer的高度？ */ } .outer ul{ /* width: 240px; */ overflow: hidden; /* overflow:hidden; 让浮动元素撑起父容器。 在本例子 撑起ul的高度。因为ul>li全都是浮动的，导致ul没有高度。 加上overflow:hidden，ul就会有自己的高度。 此高度的范围包含了所有子元素（取其子元素最高的那个高度）。 */ /* 实例程序里这里设置 zoom:1; 作用？？*/ } ul li{ list-style: none; float: left; /* li没撑起外层ul高度，是因为浮动流？ 对的。 */ background: black; width: 50px; height: 50px; margin: 0 10px 10px 0; color: white; padding: 5px; text-align: center; font-size: 14px; box-sizing: border-box; } ul li span{ font-weight: bold; font-size: 16px; } ul>li:hover{ border: 1px solid #000; color: purple; background: white; } .tips{ font-size: 12px; border: 1px solid #000; margin-right: 10px; padding: 5px; } .tips h2{ font-size: 14px; } .tips p{ display: none; } .tips p.active{ display: block; } </style> <script> window.onload = function() { var aLi = document.getElementsByTagName('li'); var oMonth = document.getElementsByTagName('h2')[0]; var oTips = document.getElementsByTagName('p'); for(var i=0; i<aLi.length; i++) { aLi[i].index = i; // 这个必须写在onmouseover事件的外部， 原因？？ aLi[i].onmouseover = function() { oMonth.innerHTML = [this.index+1] + '月节日'; for(var j=0; j<oTips.length; j++) { oTips[j].className = ''; }; oTips[this.index].className = 'active'; }; }; }; </script>
转播
