第一种：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> CSS样式里使用JavaScript(onmouseover/onmouseout)2</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
table
{
background-color:#000000;
cursor:hand;
}
td
{
/*设置onmouseover事件*/
onmouseover: expression(onmouseover=function (){this.style.borderColor ='blue';this.style.color='red';this.style.backgroundColor ='yellow'});
/*设置onmouseout事件*/
onmouseout: expression(onmouseout=function (){this.style.borderColor='';this.style.color='';this.style.backgroundColor =''});
background-color:#ffffff;
}
</style>
</HEAD>
<BODY>
<TABLE cellspacing='1px' border='1'>
<TR >
<TD >1...... </TD>
<TD>2...... </TD>
<TD>3...... </TD>
</TR>
<TR >
<TD >4...... </TD>
<TD>5...... </TD>
<TD>6...... </TD>
</TR>
</TABLE>
</BODY>
</HTML>
第二种：
<style>
body {
font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
background: #E6EAE9;
}
a {
color: #c75f3e;
}
td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
font-size:11px;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}
th {
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
background: #CAE8EA url(/images/bg_header.jpg) no-repeat;
}
tr{background-color:expression((this.rowIndex%2==0)?"#EEEEEE":"#FFFFFF");ryo:expression(onmouseover=function(){this.style.backgroundColor='#FFCCFF'},onmouseout=function(){this.style.backgroundColor=(this.style.backgroundColor='#CCFFFF'?((this.rowIndex%2==0)?"#EEEEEE":"#FFFFFF"):'#CCFFFF')},onclick=function(){this.style.backgroundColor='#CCFFFF'})}
</style>
<table cellspacing="0">
<TBODY>
<TR align=middle >
<TH>合同编号</TH>
<TH>合同内容</TH>
<TH>合同金额</TH>
<TH>交货期</TH>
<TH>Tyres</TH>
<TH>Fastest Lap</TH>
<TH>国家</TD></TH>
<TR>
<TD>Michael</TD>
<TD>Schumacher</TD>
<TD>Ferrari</TD>
<TD>Ferrari</TD>
<TD>Bridgestone</TD>
<TD>1.15.872</TD>
<TD>德国</TD></TR>
<TR>
<TD>Rubens</TD>
<TD>Barrichello</TD>
<TD>Ferrari</TD>
<TD>Ferrari</TD>
<TD>Bridgestone</TD>
<TD>1.16.760</TD>
<TD>法国</TD></TR>
<TR>
<TD>Ralph</TD>
<TD>Schumacher</TD>
<TD>Williams</TD>
<TD>BMW</TD>
<TD>Michelin</TD>
<TD>1.16.297</TD>
<TD>美国</TD></TR>
<TR>
<TD>Juan-Pablo</TD>
<TD>Montoya</TD>
<TD>Williams</TD>
<TD>BMW</TD>
<TD>Michelin</TD>
<TD>1.17.123</TD>
<TD>柬埔寨</TD></TR>
<TR>
<TD>David</TD>
<TD>Coulthard</TD>
<TD>McLaren</TD>
<TD>Mercedes</TD>
<TD>Bridgestone</TD>
<TD>1.16.423</TD>
<TD>泰国</TD></TR>
<TR>
<TD>Mika</TD>
<TD>Hakkinen</TD>
<TD>McLaren</TD>
<TD>Mercedes</TD>
<TD>Bridgestone</TD>
<TD>1.16.979</TD>
<TD>越南</TD></TR>
<TR>
<TD>Jarno</TD>
<TD>Trulli</TD>
<TD>Jordan</TD>
<TD>Honda</TD>
<TD>Bridgestone</TD>
<TD>1.16.459</TD>
<TD>菲律宾</TD></TR>
</TBODY>
</TABLE>
第三种：
<SCRIPT language=JavaScript>
function Cbg(obj, objColor)
{
obj.style.backgroundColor=objColor
}
</SCRIPT>
<table width="50%" cellSpacing=0 cellPadding=0 width=200 border=1>
<tr onmouseover="Cbg(this, '66ff99')" onmouseout="Cbg(this, 'ffffff')">
<td height="20">表格变色</td>
<td height="20">表格变色</td>
</tr>
<tr onmouseover="Cbg(this, 'ff9966')" onmouseout="Cbg(this, 'ffffff')">
<td height="20">表格变色</td>
<td height="20">表格变色</td>
</tr>
</table>
分享到：
相关推荐
总的来说，这个压缩包提供了一个使用JavaScript实现鼠标经过背景变色的基本教学，适合初学者理解和实践。如果你希望在自己的网页上实现类似效果，可以参考上述代码并进行适当的修改，以适应你的项目需求。
【随鼠标移动而变色的背景】小程序是一个基于WPF（Windows Presentation Foundation）技术的简单应用，它展示了如何响应鼠标的移动并动态改变窗口的背景颜色。程序的核心是利用鼠标移动事件（OnMouseMove）来计算...
综上所述，“鼠标经过文字变色”的功能可以通过多种方式实现，包括CSS和JavaScript，其中JavaScript提供了更强大的功能和更广泛的浏览器兼容性。对于现代Web开发而言，推荐使用JavaScript来实现这类动态效果，同时...
通过jquery给经过的表格设置css背景变色效果
在网页设计中，表格（Table）是一种常见的数据...通过这种方式，你可以实现表格鼠标经过时整行变色的效果，同时保持与其他框架的兼容性。在实际应用中，可以根据需求调整颜色、动画效果等细节，以达到最佳的视觉效果。
js 实现 鼠标经过表格时列变色! 值得下载看看!资源免费,大家分享!!
在本案例"CSS JS实现表格背景变色"中，我们将探讨如何结合这两种技术来动态改变HTML表格的背景颜色，以增加用户体验和视觉吸引力。 首先，让我们从CSS开始。CSS可以用来定义表格的基本样式，如单元格的边框、间距、...
鼠标移动表格行上行变色的JS脚本,鼠标移动表格行上行变色的JS脚本,
"表格隔行换色 鼠标移过变色"是两种常见的表格样式优化手段，它们可以使得表格内容更易于阅读，同时提升用户体验。在JavaScript（JS）的帮助下，我们可以轻松实现这些效果。 1. **隔行换色**： 隔行换色通常使用...
### PB 实现鼠标经过变色功能详解 #### 一、背景与目的 在现代软件开发过程中，提升用户体验是一项至关重要的任务。其中，交互效果的设计能够显著增强用户界面的友好度和美观度。PowerBuilder（PB）作为一种流行的...
js 特效 html 特效 鼠标经过文字变色 js 特效 html 特效 鼠标经过文字变色
CSS+JS 实现表格隔行变色 鼠标移动变色
本教程将详细讲解如何通过JavaScript实现表格行在鼠标移动、选中复选框时的变色效果。 首先，我们需要一个包含表格数据的HTML文件，例如`test2l.html`。在这个文件中，我们将创建一个带有复选框的表格。基本的HTML...
总结，改变鼠标经过背景颜色的方法多种多样，包括纯CSS的`:hover`伪类和过渡效果，以及JavaScript的事件监听器。开发者可以根据项目需求选择合适的方法，提供更加丰富的用户体验。在实际应用中，还可以结合响应式...
在“PB数据窗口鼠标移动字体变色”这个主题中，我们关注的是如何实现在用户鼠标移动到数据窗口某一行时，该行的字体颜色发生改变，以提供视觉反馈和增强用户体验。下面我们将深入探讨这一功能的实现原理和步骤。 1....
为了提高用户的阅读体验，有时候我们需要对表格进行美化，例如实现隔行变色、鼠标滑过时选中变色等特效。本教程将详细介绍如何使用JavaScript来实现这些效果。 首先，让我们了解一下JavaScript在网页中的作用。...
本主题涉及的是使用jQuery实现的一种常见的用户界面优化技巧——"表格隔行变色"以及"鼠标滑过时竖直表格内容变色效果"。这种效果可以提升表格的可读性，使得数据更加清晰易辨。 首先，我们来讨论“表格隔行变色”。...
javascript实现网页中表格的行随着鼠标移动而变色，实时变色表格行
最后，`SkinDemo`可能是一个示例项目或库，展示了如何实现不同的皮肤或视觉效果，包括鼠标经过时的按钮变色。 了解这一技术对于前端开发者来说非常重要，因为它有助于创建更直观、更具吸引力的用户界面。通过结合...
/** * * @author 翟正强 广东中山中南中南T25班 * @version1.0 * @2009-09-08 * @表格渲染(悬浮变色,隔行换色,点击变色) */