分享之...
---------------------
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
.datalist{
border:1px solid #0058a3;
font-family:Arial;
border-collapse:collapse;
background-color:#eaf5ff;
font-size: 14px;
}
.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">
<tr>
<th>Name</th>
<th>Class</th>
<th>Birthday</th>
<th>Address</th>
<th>Mobile</th>
</tr>
<tr>
<td>isaac</td>
<td>W13</td>
<td>Jun 24h</td>
<td>Cancer</td>
<td>1118159</td>
</tr>
<tr>
<td>isaac</td>
<td>W13</td>
<td>Jun 24h</td>
<td>Cancer</td>
<td>1118159</td>
</tr>
<tr>
<td>isaac</td>
<td>W13</td>
<td>Jun 24h</td>
<td>Cancer</td>
<td>1118159</td>
</tr>
<tr>
<td>isaac</td>
<td>W13</td>
<td>Jun 24h</td>
<td>Cancer</td>
<td>1118159</td>
</tr>
<tr>
<td>isaac</td>
<td>W13</td>
<td>Jun 24h</td>
<td>Cancer</td>
<td>1118159</td>
</tr>
<tr>
<td>isaac</td>
<td>W13</td>
<td>Jun 24h</td>
<td>Cancer</td>
<td>1118159</td>
</tr>
<tr>
<td>isaac</td>
<td>W13</td>
<td>Jun 24h</td>
<td>Cancer</td>
<td>1118159</td>
</tr>
<tr>
<td>isaac</td>
<td>W13</td>
<td>Jun 24h</td>
<td>Cancer</td>
<td>1118159</td>
</tr>
<tr>
<td>isaac</td>
<td>W13</td>
<td>Jun 24h</td>
<td>Cancer</td>
<td>1118159</td>
</tr>
<tr>
<td>isaac</td>
<td>W13</td>
<td>Jun 24h</td>
<td>Cancer</td>
<td>1118159</td>
</tr>
<tr>
<td>isaac</td>
<td>W13</td>
<td>Jun 24h</td>
<td>Cancer</td>
<td>1118159</td>
</tr>
<tr>
<td>isaac</td>
<td>W13</td>
<td>Jun 24h</td>
<td>Cancer</td>
<td>1118159</td>
</tr>
<tr>
<td>isaac</td>
<td>W13</td>
<td>Jun 24h</td>
<td>Cancer</td>
<td>1118159</td>
</tr>
<tr>
<td>isaac</td>
<td>W13</td>
<td>Jun 24h</td>
<td>Cancer</td>
<td>1118159</td>
</tr>
<tr>
<td>isaac</td>
<td>W13</td>
<td>Jun 24h</td>
<td>Cancer</td>
<td>1118159</td>
</tr>
</table>
<script type="text/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>
- 大小: 75.3 KB
分享到：
相关推荐
【CSS滑动门技术】是一种在网页设计中创建动态效果的方法，主要用于导航栏的背景跟随鼠标滑动。这种技术利用CSS的背景图像层叠和定位特性，通过左右两部分背景图像（滑动门）的相对移动，实现内容区域随着标签文字的...
本主题聚焦于如何使用纯CSS技术来实现一个既美观又实用的表格滚动条效果。这种效果可以让用户在不改变表格整体布局的情况下，优雅地浏览表格中的所有内容。 首先，我们来探讨CSS在创建滚动条样式上的关键属性。CSS3...
9. **动画效果**：CSS动画可以让表格更具吸引力，例如淡入淡出、滑动等，使用`transition`和`keyframes`规则可以实现。 10. **自定义单元格**：通过CSS类，我们可以为特定的单元格应用特殊样式，比如高亮重要数据，...
6. **自定义样式**：可以使用CSS动画为表格添加动态效果，如淡入淡出、滑动显示等，增加视觉吸引力。 7. **可访问性**：确保CSS样式不影响表格的可访问性，如正确使用`<caption>`元素为表格提供标题，使用`<thead>`...
JavaScript 表格美化鼠标滑动单元格变色 ...本节中，我们使用 JavaScript 和 CSS 语言来美化表格，并且实现了鼠标滑动单元格变色的效果。这个效果可以增强用户体验和交互性，使得表格变得更加美观和交互性强。
JavaScript 自动滑动和鼠标滑动区域是一种常见的网页动态效果，用于展示滚动的新闻、广告或其他信息。在给定的代码示例中，可以看到两个不同的实现方式，但都是基于 JavaScript 和 CSS 实现的。 首先，我们来看第一...
本问题聚焦于如何实现ASPxGridView中跟随鼠标滑动的行光带效果，即当鼠标悬停在某一行上时，该行的背景颜色会改变，鼠标离开后恢复原状。接下来，我们将详细讲解如何实现这一效果。 首先，我们需要理解`...
3. 利用CSS3的过渡（transition）和动画（animation）效果，为表格元素添加动态效果，如鼠标悬停时改变背景色或高亮边框。 4. 使用jQuery选择和操作DOM元素，例如，当用户点击某车型时，显示或隐藏详细信息区域。 5....
在网页设计中，表格（Table）是一种常见的数据展示方式，特别是在数据量较大或者需要行列结构清晰展示...具体实现方式可能包括独立的JavaScript文件、CSS文件，以及HTML结构，它们共同协作来创建一个可拖动列的表格。
本文将详细介绍如何通过JavaScript等前端技术实现“鼠标控制网页中图片滑动”的功能。 #### 二、技术背景与需求分析 在开发一个能够通过鼠标控制图片滑动的功能时，首先需要理解以下几点： 1. **技术栈选择**：通常...
这些函数协同工作，实现了鼠标滑过表格单元格时实时改变星星状态的效果，从而创建了一个简单的鼠标滑动评分控件。用户可以通过鼠标悬停在不同位置来预览不同的评分，而无需实际点击。 在实际应用中，这种评分控件...
6.2 CSS控制表格的颜色交替 155 6.3 CSS控制表格边框 156 6.4 制作圆角框 157 6.5 小结 159 第7章 表单样式设计 160 7.1 表单样式设计 161 7.1.1 表单透明化 161 7.1.2 增加表单中的空隙 162 7.2 表单元素样式设计 ...
3. 动画效果：通过JavaScript，可以实现过渡动画，如淡入淡出、滑动等，提升菜单展开和关闭的视觉体验。 4. 逻辑控制：判断当前菜单状态，避免多次点击导致的闪烁现象，同时处理多级菜单间的联动关系，确保用户在...
4. 数据表格：鼠标悬停在单元格上，可以显示额外的数据或操作按钮。 四、优化与兼容性 在实现鼠标切换效果时，要注意性能优化，避免过多的DOM操作和重绘。同时，要考虑浏览器兼容性，尤其是对于不支持CSS3动画的老...
【jQuery滑动评级】是一种常见的用户交互功能，常用于在线评价、评分系统或者评论区，让用户通过滑动鼠标来选择他们对某个产品或服务的评价等级。这种评级方式提供了直观且易于使用的界面，增强了用户体验。在本文中...
这种效果在展示宽幅图像、长表格或者水平布局的项目时特别有用。下面将详细介绍如何利用JavaScript和jQuery实现这个功能。 首先，我们要明白`scrollLeft`属性的作用。在JavaScript中，`scrollLeft`是一个适用于元素...
7. 登录界面：登录界面通常包含输入框和按钮，CSS可以设定输入框的边框、内阴影、占位符颜色等，按钮则可以通过`cursor`属性改变鼠标悬停时的指针样式，`box-shadow`添加阴影效果。 8. 搜索框：搜索框常常带有放大...
HTML5_html表头固定不滚动而内容滚动的效果，表格是基于Div CSS实现的，将表头固定...在显示较多数据时，当用户滚动鼠标中轮时，表格内容会滚动，而表头固定不变，可以将表格内容与表头很好的对应，便于阅读表格内容。
- **网页重构**：将旧的表格布局转换为div+CSS布局，提高页面加载速度和SEO优化。 - **动画效果**：利用CSS3动画和过渡效果增强用户体验，如滑动、淡入淡出等。 6. **调试与优化** - **浏览器兼容性**：理解各...