当鼠标经过表格数据行时颜色不同且奇偶行颜色也不同

当鼠标经过表格数据行时，可以通过CSS样式来实现颜色不同的效果。下面给出两个示例来说明该效果的实现方法。

示例一：使用CSS伪类选择器

可以使用CSS的伪类选择器来实现当鼠标经过表格数据行时的颜色变化，同时也可以通过伪类选择器控制奇偶行的颜色不同。具体步骤如下：

1. 首先，为表格的偶数行和奇数行分别指定不同的CSS样式。例如：

table tr:nth-child(odd) { background-color: #f1f1f1; }
table tr:nth-child(even) { background-color: #ffffff; }

上述代码中，nth-child伪类选择器用于选择表格行中的奇数行和偶数行。其中，:nth-child(odd)用于选择表格中的奇数行，:nth-child(even)用于选择表格中的偶数行。background-color属性用于设置单元格的背景色。

1. 使用:hover伪类选择器来控制当鼠标经过表格行时的颜色变化。例如：

table tr:hover { background-color: #cccccc; }

上述代码中，:hover伪类选择器用于选择鼠标经过的表格行。background-color属性用于设置当鼠标经过表格行时的背景色。

下面是实现效果的完整代码示例：

```html

姓名	年龄	性别
张三	20	男
李四	25	女
王五	30	男
赵六	35	女

```

上述代码中，表格中的奇数行和偶数行分别用不同的背景色进行了区分，同时当鼠标经过表格行时，被经过的行的背景色也会随之变化。

示例二：使用jQuery实现

除了使用CSS伪类选择器来实现上述效果外，还可以使用jQuery来实现。具体步骤如下：

1. 引入jQuery库文件。例如：

```html

```

1. 使用:even和:odd选择器来分别控制表格的奇偶行。例如：

javascript
$('table tr:even').addClass('even');
$('table tr:odd').addClass('odd');

上述代码中，:even选择器用于选择表格中的偶数行，:odd选择器用于选择表格中的奇数行。addClass方法用于为被选元素添加一个或多个类。

1. 使用mouseover和mouseout事件来控制当鼠标经过表格行时的颜色变化。例如：

```javascript
$('table tr').mouseover(function() {
$(this).addClass('hover');
});

$('table tr').mouseout(function() {
$(this).removeClass('hover');
});
```

上述代码中，mouseover事件用于添加鼠标经过表格行的效果，mouseout事件用于移除鼠标经过表格行的效果。addClass和removeClass方法用于为被选元素添加和移除类。

下面是使用jQuery实现的完整代码示例：

```html

姓名	年龄	性别
张三	20	男
李四	25	女
王五	30	男
赵六	35	女

```

上述代码中，使用addClass和removeClass方法来为表格行添加和移除类，控制奇偶行的样式不同。同时使用mouseover和mouseout事件来控制鼠标经过和移出表格行的样式变化。