css
<style type="text/css">
table{
border: 1px solid #red;
margin:0 auto;
}
td{
color:#fff;
text-align:center;
background:black;
width:75px;
height:75px;
font-weight:bold;
border:2px solid red;
}
.red{
width:360px;
height:390px;
padding-top:10px;
margin:0 auto;
background:#666;
}
li{
list-style:none;
}
</style>
div
<div class='red'>
<table>
r<tr>
<td>
<p>1月</p>
<h3>jyu</h3>
</td>
<td>
<p>2月</p>
<h3>jyu</h3>
</td>
<td>
<p>3月</p>
<h3>jyu</h3>
</td>
<td>
<p>4月</p>
<h3>jyu</h3>
</td>
</tr>
<tr>
<td>
<p>5月</p>
<h3>jyu</h3>
</td>
<td>
<p>6月</p>
<h3>jyu</h3>
</td>
<td>
<p>7月</p>
<h3>jyu</h3>
</td>
<td>
<p>8月</p>
<h3>jyu</h3>
</td>
</tr>
<tr>
<td>
<p>9月</p>
<h3>jyu</h3>
</td>
<td>
<p>10月</p>
<h3>jyu</h3>
</td>
<td>
<p>11月</p>
<h3>jyu</h3>
</td>
<td>
<p>12月</p>
<h3>jyu</h3>
</td>
</tr>
</table>
<div>
<ul>
<li></li>
<li></li>
</ul>
</div>
</div>
js
<script type="text/javascript">
var td=document.querySelectorAll('td');
var li=document.querySelectorAll('li');
for(i=0;i<td.length;i++){
td[0].onmouseover=function(){
this.style.background='#666';
li[0].innerHTML='一月活动';
li[1].innerHTML='大寒接小寒';
li[0].style.color='#fff'
li[1].style.color='#fff'
}
td[0].onmouseout=function(){
this.style.background='#000';
li[0].innerHTML='';
li[1].innerHTML='';
}
}
for(i=0;i<td.length;i++){
td[1].onmouseover=function(){
this.style.background='#666';
li[0].innerHTML='二月活动';
li[1].innerHTML='二月立春雨水连';
li[0].style.color='#fff'
li[1].style.color='#fff'
}
td[1].onmouseout=function(){
this.style.background='#000';
li[0].innerHTML='';
li[1].innerHTML='';
}
}
for(i=0;i<td.length;i++){
td[2].onmouseover=function(){
this.style.background='#666';
li[0].innerHTML='三月活动';
li[1].innerHTML='惊蛰春分在三月';
li[0].style.color='#fff'
li[1].style.color='#fff'
}
td[2].onmouseout=function(){
this.style.background='#000';
li[0].innerHTML='';
li[1].innerHTML='';
}
}
for(i=0;i<td.length;i++){
td[3].onmouseover=function(){
this.style.background='#666';
li[0].innerHTML='四月活动';
li[1].innerHTML='清明谷雨四月天';
li[0].style.color='#fff'
li[1].style.color='#fff'
}
td[3].onmouseout=function(){
this.style.background='#000';
li[0].innerHTML='';
li[1].innerHTML='';
}
}
for(i=0;i<td.length;i++){
td[4].onmouseover=function(){
this.style.background='#666';
li[0].innerHTML='五月活动';
li[1].innerHTML='五月立夏和小满';
li[0].style.color='#fff'
li[1].style.color='#fff'
}
td[4].onmouseout=function(){
this.style.background='#000';
li[0].innerHTML='';
li[1].innerHTML='';
}
}
for(i=0;i<td.length;i++){
td[5].onmouseover=function(){
this.style.background='#666';
li[0].innerHTML='六月活动';
li[1].innerHTML='六月芒种夏至连';
li[0].style.color='#fff'
li[1].style.color='#fff'
}
td[5].onmouseout=function(){
this.style.background='#000';
li[0].innerHTML='';
li[1].innerHTML='';
}
}
for(i=0;i<td.length;i++){
td[6].onmouseover=function(){
this.style.background='#666';
li[0].innerHTML='七月活动';
li[1].innerHTML='七月大暑和小暑';
li[0].style.color='#fff'
li[1].style.color='#fff'
}
td[6].onmouseout=function(){
this.style.background='#000';
li[0].innerHTML='';
li[1].innerHTML='';
}
}
for(i=0;i<td.length;i++){
td[7].onmouseover=function(){
this.style.background='#666';
li[0].innerHTML='八月活动';
li[1].innerHTML='立秋处暑在八月';
li[0].style.color='#fff'
li[1].style.color='#fff'
}
td[7].onmouseout=function(){
this.style.background='#000';
li[0].innerHTML='';
li[1].innerHTML='';
}
}
for(i=0;i<td.length;i++){
td[8].onmouseover=function(){
this.style.background='#666';
li[0].innerHTML='九月活动';
li[1].innerHTML='九月白露接秋分';
li[0].style.color='#fff'
li[1].style.color='#fff'
}
td[8].onmouseout=function(){
this.style.background='#000';
li[0].innerHTML='';
li[1].innerHTML='';
}
}
for(i=0;i<td.length;i++){
td[9].onmouseover=function(){
this.style.background='#666';
li[0].innerHTML='十月活动';
li[1].innerHTML='寒露霜降十月天';
li[0].style.color='#fff'
li[1].style.color='#fff'
}
td[9].onmouseout=function(){
this.style.background='#000';
li[0].innerHTML='';
li[1].innerHTML='';
}
}
for(i=0;i<td.length;i++){
td[10].onmouseover=function(){
this.style.background='#666';
li[0].innerHTML='十一月活动';
li[1].innerHTML='立冬小雪十一月';
li[0].style.color='#fff'
li[1].style.color='#fff'
}
td[10].onmouseout=function(){
this.style.background='#000';
li[0].innerHTML='';
li[1].innerHTML='';
}
}
for(i=0;i<td.length;i++){
td[11].onmouseover=function(){
this.style.background='#666';
li[0].innerHTML='十二月活动';
li[1].innerHTML='大雪冬至迎新年';
li[0].style.color='#fff';
li[1].style.color='#fff';
}
td[11].onmouseout=function(){
this.style.background='#000';
li[0].innerHTML='';
li[1].innerHTML='';
}
}
</script>
