实例讲解：CSS制作鼠标经过改变表格背景属性

	设为首页		友情链接
	在线留言		发表文章
	加入收藏		广告联系

服务器

小说专版

数据库

Solaris

专题：

SOA

您现在的位置：刺猬宫 >> 网络编程 >> CSS >> 教程正文

用户登录

新用户注册

专题栏目

　　实例讲解：CSS制作鼠标经过改变表格背景属性

实例讲解：CSS制作鼠标经过改变表格背景属性

这份教程将教会你下面的技巧：当鼠标移至表格（单元格）上方时，改变表格的背景颜色。
实例讲解：CSS制作鼠标经过改变表格背景属性

首先，在你的页面上创建一个菜单；然后，创建两种用于鉴别的颜色体：一个是表格的初始颜色，另一个是鼠标移至表格上方时所产生的背景颜色。在我这个案例中，我所默认使用的背景效果颜色（鼠标以上去时）是：#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>

频道声明：本频道的文章除部分特别声明禁止转载的专稿外，可以自由转载.但请务必注明出出处和原始作者文章版权归本频道与文章作者所有.对于被频道转载文章的个人和网站,我们表示深深的谢意。

原始作者:佚名	录入时间:2007-6-20 17:10:05
信息来源:不详	投稿信箱:itqoo@126.com

教程录入：itqoo 责任编辑：itqoo

上一个教程：技巧：同一网页实现多种CSS 样式表切换

下一个教程：技巧：div+css设计网页时浮动问题的解决方法

【字体：小大】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】

　网友评论：（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）

- 关于我们 - 合作伙伴 - 友情链接 - 广告刊登 - 投稿热线 - 在线留言 - 版权声明 - 联系方式 -
	IT公社版权所有粤ICP备05127012号
	Copyrigh@2005-2006 itqoo.com.Inc All Rights Reserved 推荐分辨率 1024*768
	联系站长：E-Mail:itqoo@126.com MSN:urchincc@hotmail.com QQ:
	特别感谢:亿太网络提供空间支持