效果：
代码：
1 <head runat="server"> 2 <title></title> 3 <style type="text/css"> 4 #backcolor 5 { 6 width: 400px; 7 height: 400px; 8 background: #FFFF00; 9 text-align: center; 10 border: ridge 30pt red; 11 margin: auto; 12 } 13 TD 14 { 15 border: ridge 3pt red; 16 width: 100px; 17 height: 100px; 18 } 19 div 20 { 21 width: auto; 22 height: 100px; 23 text-align: center; 24 line-height: 100px; 25 } 26 </style> 27 <script type="text/javascript"> 28 window.onload = function () { 29 var divArry = document.getElementsByName('divname'); 30 var divto = document.getElementById('div12'); 31 var arry = ['春节', '情人节', '不知道有什么节日！', '清明节', '劳动节', '儿童节', 32 '好像这个月没有什么重大的节日吧！', '建军节', '教师节', '国庆节', '光棍节', '圣诞节']; 33 for (var i = 0; i < divArry.length; i++) { 34 divArry[i].index = i; 35 divArry[i].onmouseover = function () { 36 for (var i = 0; i < divArry.length; i++) { 37 divArry[i].style.background = ''; 38 } 39 this.style.background = 'red'; 40 divto.innerHTML = '<h3>' + this.innerHTML + arry[this.index] + '</h3>'; 41 } 42 } 43 }; 44 </script> 45 </head> 46 <body> 47 <table id="backcolor"> 48 <tr> 49 <td> 50 <div id="div0" name="divname"> 51 一月 52 </div> 53 </td> 54 <td> 55 <div id="div1" name="divname"> 56 二月 57 </div> 58 </td> 59 <td> 60 <div id="div2" name="divname"> 61 三月 62 </div> 63 </td> 64 <td> 65 <div id="div3" name="divname"> 66 四月 67 </div> 68 </td> 69 </tr> 70 <tr> 71 <td> 72 <div id="div4" name="divname"> 73 五月 74 </div> 75 </td> 76 <td> 77 <div id="div5" name="divname"> 78 六月 79 </div> 80 </td> 81 <td> 82 <div id="div6" name="divname"> 83 七月 84 </div> 85 </td> 86 <td> 87 <div id="div7" name="divname"> 88 八月 89 </div> 90 </td> 91 </tr> 92 <tr> 93 <td> 94 <div id="div8" name="divname"> 95 九月 96 </div> 97 </td> 98 <td> 99 <div id="div9" name="divname">100 十月101 </div>102 </td>103 <td>104 <div id="div10" name="divname">105 十一月106 </div>107 </td>108 <td>109 <div id="div11" name="divname">110 十二月111 </div>112 </td>113 </tr>114 <tr>115 <td colspan="4">116 <div id="div12" style="width: 400px;">117 </div>118 </td>119 </tr>120 </table>121 </body>
联系客服
