<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script type="text/javascript">
window.onload=function(){
var x= document.getElementById('tes');
var x1 = x.getElementsByTagName('li');
var x2 = document.getElementById('t2');
for(var i=0;i<x1.length;i++){
x1[i].index=i;
x1[i].onmouseover=function(){
for(var i=0;i<x1.length;i++){
x1[i].className='';
}this.className='box';
x2.innerHTML='<h2>'+(this.index+1)+'月份</h2>\
<p>study English</p>';
};
x1[i].onmouseout=function(){
for(var i=0;i<x1.length;i++){
x1[i].className='';
}
}
}
};
</script>
<body>
<style type="text/css">
.di ul{
width: 246px;
height: 510px;
padding: 0;
margin-left: 420px;
border: 1px solid black;
}
.di ul li{
width: 80px;
text-align: center;
list-style: none;
height: 100px;
float: left;
border: 1px solid black;
}
.dq {
float: left;
/*margin-top: 90px; */
width: 246px;
height: 100px;
text-align: center;
border: 1px solid black;
}
.box{
background-color: red;
}
</style>
<div class="di" id="tes">
<ul>
<li><h2>1</h2><p>Jan</p></li>
<li><h2>2</h2><p>Feb</p></li>
<li><h2>3</h2><p>Mar</p></li>
<li><h2>4</h2><p>Apr</p></li>
<li><h2>5</h2><p>May</p></li>
<li><h2>6</h2><p>Jun</p></li>
<li><h2>7</h2><p>Jul</p></li>
<li><h2>8</h2><p>Aug</p></li>
<li><h2>9</h2><p>Sept</p></li>
<li><h2>10</h2><p>Oct</p></li>
<li><h2>11</h2><p>Nov</p></li>
<li><h2>12</h2><p>Dec</p></li>
<div class="dq" id="t2">
<h2>1sad</h2> <p>asd</p>
</div>
</ul>
</div>
</body>
</html>
