这份教程将教会你下面的技巧:当鼠标移至表格(单元格)上方时,改变表格的背景颜色。
首先,在你的页面上创建一个菜单;然后,创建两种用于鉴别的颜色体:一个是表格的初始颜色,另一个是鼠标移至表格上方时所产生的背景颜色。在我这个案例中,我所默认使用的背景效果颜色(鼠标以上去时)是:#999999,初始颜色是:#CCCCCC。 现在,将下面这段代码复制到文档头部。(位于<HEAD></HEAD>标签之间) <style type="text/css"> td.off { background: #CCCCCC; } td.on{ background: #999999; } </style> 将蓝色改变为你所需要的颜色。 td.off意指表格的初始颜色,这里设置的初始值是#CCCCCC。 td.on意指鼠标移动至表格上方时显示的颜色,这里设置的值是深灰色(#CCCCCC)。 现在,我们需要做的是将这段CSS代码应用到已经创建的表格中。将下面这段代码插到表格中的每个<td>标签中。class="off" onmouseover="this.className='on'" onmouseout="this.className='off'" 加入后的代码如下所示: <td class="off" onmouseover="this.className='on'" onmouseout="this.className='off'">MENU 1</td> 让我们逐行理解下面的这段代码: <td class="off" —— 为表格中的每列单元格所对应的CSS的off类赋值,它的意思是:表格每列单元格的初始颜色是:#CCCCCC。 onmouseover="this.className='on'" ——当鼠标移至表格中的每列单元格之上时,所对应的CSS的效果。 onmouseout="this.className='off'"> ——当鼠标从表格中的每列单元格上移开时,所对应的CSS的效果。 上图示例所对应的全部代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Table Background Change</title> <style type="text/css"> td.off { background: #CCCCCC; } td.on { background: #999999; } </style> </head> <body> <table width="150" cellpadding="3"> <tr> <td class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"><font color="#000000" size="1">Menu 1 </font></td> </tr> <tr> <td class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"><font color="#000000" size="1">Menu 2 </font></td> </tr> <tr> <td class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"><font color="#000000" size="1">Menu 3</font></td> </tr> <tr> <td class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"><font color="#000000" size="1">Menu 4 </font></td> </tr> </table> </body> </html> |
|