html代码如下:
div align="center" id="divAll"><table id="tab" border="1" cellpadding="0" cellspacing="10"> ???<tr> ???????<td date="一月活动<br>这是一月活动"><h2>1</h2>JAN</td> ???????<td date="二月活动<br>这是二月活动"><h2>2</h2>FER</td> ???????<td date="三月活动<br>这是三月活动"><h2>3</h2>MAR</td> ???</tr> ???<tr> ???????<td date="四月活动<br>这是四月活动"><h2>4</h2>APR</td> ???????<td date="五月活动<br>这是五月活动"><h2>5</h2>MAY</td> ???????<td date="六月活动<br>这是六月活动"><h2>6</h2>JUN</td> ???</tr> ???<tr> ???????<td date="七月活动<br>这是七月活动"><h2>7</h2>JUL</td> ???????<td date="八月活动<br>这是八月活动"><h2>8</h2>AUG</td> ???????<td date="九月活动<br>这是九月活动"><h2>9</h2>SEP</td> ???</tr> ???<tr> ???????<td date="十月活动<br>这是十月活动"><h2>10</h2>OCT</td> ???????<td date="十一月活动<br>这是十一月活动"><h2>11</h2>NOV</td> ???????<td date="十二月活动<br>这是十二月活动"><h2>12</h2>DEC</td> ???</tr></table><div id="div_on"></div></div>
CSS样式代码如下：
<style> ???*{ ???????padding: 0; ???????margin: 0; ???} ???body { ???????background: #f6f9fc; ????????font-family: arial; ???} ???div{ ???????????????background-color: #ccc; ???????width: 50%; ???} ???td{ ???????background-color: black; ???????color: white; ???} ???#tab{ ???????margin: 0 auto; ???????width: 30%; ???????text-align: center; ???} ???#div_on{ ???width: 30%; ???height: 50px; ???background: #D6D6D6; ???margin: 0 auto; ???} ???</style>JS代码如下：
var tdAlls = null, ???divDom = null; $(function(){// ????initDom(); ???addEvent();});//function initDom(){ ???tdAlls=$(‘td‘); ?????//下面用不到的话这里可以注释掉 ???divDom=$(‘div_on‘);//}function addEvent(){ ???$(‘td‘).mouseover(function(){ ????//这里可以用上面定义的变量名 也可以直接写当前的赋值变量名（$(‘td‘)) ????????????$(‘td‘).css(‘color‘,"white"); ???????$(this).css(‘color‘,"red"); ???????var str=$(this).attr(‘date‘); ???????$(‘#div_on‘).html(str); ???}).mouseout(function(){ ???????$(‘td‘).css(‘color‘,"white"); ??????????$(this).css(‘color‘,"red"); ???});}运行结果：
当鼠标移入字体变红，下面div显示当前单元格显示的内容，当鼠标移入另一个单元格，当前单元格变红，原本单元格变回原来颜色
用jquery制作简易日历
原文地址：https://www.cnblogs.com/qq1312583369/p/10258449.html