<html>
<head>
<title>Member List</title>
<style>
<!--
.datalist{
border:1px solid #0058a3; /* 表格边框 */
font-family:Arial;
border-collapse:collapse; /* 边框重叠 */
background-color:#eaf5ff; /* 表格背景色 */
font-size:14px;
}
.datalist caption{
padding-bottom:5px;
font:bold 1.4em;
text-align:left;
}
.datalist th{
border:1px solid #0058a3; /* 行名称边框 */
background-color:#4bacff; /* 行名称背景色 */
color:#FFFFFF; /* 行名称颜色 */
font-weight:bold;
padding-top:4px; padding-bottom:4px;
padding-left:12px; padding-right:12px;
text-align:center;
}
.datalist td{
border:1px solid #0058a3; /* 单元格边框 */
text-align:left;
padding-top:4px; padding-bottom:4px;
padding-left:10px; padding-right:10px;
}
.datalist tr:hover, .datalist tr.altrow{
background-color:#c4e4ff; /* 动态变色 */
}
-->
</style>
</head>
<body>
<table class="datalist" summary="list of members in EE Studay">
<caption>Member List</caption>
<tr>
<th scope="col">Name</th>
<th scope="col">Class</th>
<th scope="col">Birthday</th>
<th scope="col">Constellation</th>
<th scope="col">Mobile</th>
</tr>
<tr>
<td>isaac</td>
<td>W13</td>
<td>Jun 24th</td>
<td>Cancer</td>
<td>1118159</td>
</tr>
<tr>
<td>girlwing</td>
<td>W210</td>
<td>Sep 16th</td>
<td>Virgo</td>
<td>1307994</td>
</tr>
<tr>
<td>tastestory</td>
<td>W15</td>
<td>Nov 29th</td>
<td>Sagittarius</td>
<td>1095245</td>
</tr>
<tr>
<td>lovehate</td>
<td>W47</td>
<td>Sep 5th</td>
<td>Virgo</td>
<td>6098017</td>
</tr>
<tr>
<td>slepox</td>
<td>W19</td>
<td>Nov 18th</td>
<td>Scorpio</td>
<td>0658635</td>
</tr>
<tr>
<td>smartlau</td>
<td>W19</td>
<td>Dec 30th</td>
<td>Capricorn</td>
<td>0006621</td>
</tr>
<tr>
<td>whaler</td>
<td>W19</td>
<td>Jan 18th</td>
<td>Capricorn</td>
<td>1851918</td>
</tr>
<tr>
<td>shenhuanyan</td>
<td>W25</td>
<td>Jan 31th</td>
<td>Aquarius</td>
<td>0621827</td>
</tr>
<tr>
<td>tuonene</td>
<td>W210</td>
<td>Nov 26th</td>
<td>Sagittarius</td>
<td>0091704</td>
</tr>
<tr>
<td>ArthurRivers</td>
<td>W91</td>
<td>Feb 26th</td>
<td>Pisces</td>
<td>0468357</td>
</tr>
<tr>
<td>reconzansp</td>
<td>W09</td>
<td>Oct 13th</td>
<td>Libra</td>
<td>3643041</td>
</tr>
<tr>
<td>linear</td>
<td>W86</td>
<td>Aug 18th</td>
<td>Leo</td>
<td>6398341</td>
</tr>
<tr>
<td>laopiao</td>
<td>W41</td>
<td>May 17th</td>
<td>Taurus</td>
<td>1254004</td>
</tr>
<tr>
<td>dovecho</td>
<td>W19</td>
<td>Dec 9th</td>
<td>Sagittarius</td>
<td>1892013</td>
</tr>
<tr>
<td>shanghen</td>
<td>W42</td>
<td>May 24th</td>
<td>Gemini</td>
<td>1544254</td>
</tr>
<tr>
<td>venessawj</td>
<td>W45</td>
<td>Apr 1st</td>
<td>Aries</td>
<td>1523753</td>
</tr>
<tr>
<td>lightyear</td>
<td>W311</td>
<td>Mar 23th</td>
<td>Aries</td>
<td>1002908</td>
</tr>
</table>
<script language="javascript">
var rows = document.getElementsByTagName('tr');
for (var i=0;i<rows.length;i++){
rows[i].onmouseover = function(){ //鼠标在行上面的时候
this.className += 'altrow';
}
rows[i].onmouseout = function(){ //鼠标离开时
this.className = this.className.replace('altrow','');
}
}
</script>
</body>
</html>
分享到：
相关推荐
在网页设计中，“鼠标经过文字变色”是一种常见的用户界面优化手段，它可以提升用户体验，使页面更加生动和吸引人。这种效果通常通过CSS或JavaScript来实现。 #### CSS方法 使用CSS的`:hover`伪类可以轻松地为鼠标...
在网页设计中，表格（Table）是一种常见的数据...通过这种方式，你可以实现表格鼠标经过时整行变色的效果，同时保持与其他框架的兼容性。在实际应用中，可以根据需求调整颜色、动画效果等细节，以达到最佳的视觉效果。
js 特效 html 特效 鼠标经过文字变色 js 特效 html 特效 鼠标经过文字变色
最后，`SkinDemo`可能是一个示例项目或库，展示了如何实现不同的皮肤或视觉效果，包括鼠标经过时的按钮变色。 了解这一技术对于前端开发者来说非常重要，因为它有助于创建更直观、更具吸引力的用户界面。通过结合...
### PB 实现鼠标经过变色功能详解 #### 一、背景与目的 在现代软件开发过程中，提升用户体验是一项至关重要的任务。其中，交互效果的设计能够显著增强用户界面的友好度和美观度。PowerBuilder（PB）作为一种流行的...
### js鼠标经过变色知识点详解 #### 一、概述 在网页设计中，为了提高用户体验和界面美观度，经常需要实现鼠标悬浮时元素颜色发生变化的效果。这种效果不仅可以应用于导航栏菜单，还可以广泛用于按钮、图标等其他...
综上所述，“鼠标移动变色代码”巧妙地结合了HTML、CSS和JavaScript，实现了鼠标悬停时的动态色彩变换，增强了网页的互动性和美观度。开发者应熟悉这三种技术的基本语法和交互机制，以便在实际项目中灵活运用此类...
本话题将深入探讨"CSS3鼠标经过图标变色旋转特效"，这是一种利用CSS3特性实现的动态用户交互效果。 首先，我们要理解“鼠标经过”事件，这是网页交互设计中的一个常见元素。当用户将鼠标指针悬停在某个元素上时，就...
js 实现 鼠标经过表格时列变色! 值得下载看看!资源免费,大家分享!!
在JavaScript（JS）中，实现鼠标经过元素时背景自动变色是一种常见的交互效果，它可以提升用户的体验感。这个"JS实现鼠标经过背景自动变色代码.zip"文件可能包含了一个简单的示例，用于演示如何通过JavaScript来改变...
标题“鼠标滑过变色”通常指的是网页设计中的一种交互效果，当用户将鼠标光标悬停在某个元素上时，该元素的颜色或样式会发生变化。这种效果在导航菜单、按钮或其他可点击元素中非常常见，能提升用户体验，提供视觉...
在上述例子中，我们看到了如何通过自定义装饰器 `OverOutWrapper` 实现鼠标经过表格行变色的功能。这个装饰器继承自Displaytag 提供的 `TableDecorator` 类，并重写了 `addRowId()` 方法。`addRowId()` 方法通常用于...
通过jquery给经过的表格设置css背景变色效果
【随鼠标移动而变色的背景】小程序是一个基于WPF（Windows Presentation Foundation）技术的简单应用，它展示了如何响应鼠标的移动并动态改变窗口的背景颜色。程序的核心是利用鼠标移动事件（OnMouseMove）来计算...
鼠标移动表格行上行变色的JS脚本,鼠标移动表格行上行变色的JS脚本,
"Js地图热点，选择和鼠标滑过变色特效" 主要涉及到JavaScript编程语言以及地图热点（hotspots）的概念，这些热点通常是地图上的特定区域，当用户与之交互时（如点击或鼠标悬停），会触发某些视觉效果，例如变色，以...
javascript实现网页中表格的行随着鼠标移动而变色，实时变色表格行
"表格隔行换色 鼠标移过变色"是两种常见的表格样式优化手段，它们可以使得表格内容更易于阅读，同时提升用户体验。在JavaScript（JS）的帮助下，我们可以轻松实现这些效果。 1. **隔行换色**： 隔行换色通常使用...
js斑马线，兼容隔行变色，鼠标经过变色，鼠标离开返回，兼容所有浏览器