CSS 鼠標移動tr變色是一種常見的網頁設計技巧，可以讓表格單元格的背景顏色隨著鼠標的移動而變化。本文將介紹如何使用 CSS 實現這一效果。

首先，我們需要了解 HTML 和 CSS 的基本語法。HTML 用于創建網頁結構，而 CSS 用于定義網頁的布局、樣式和顏色。在 HTML 中，tr 元素表示表格單元格，而 CSS 可以通過定義 tr 元素的樣式來實現表格單元格的變色效果。

下面是一個使用 CSS 實現鼠標移動 tr 變色的例子：

```html

<table>

<tr style="background-color: red;">

<td>單元格1</td>

<td>單元格2</td>

</tr>

<tr style="background-color: blue;">

<td>單元格3</td>

<td>單元格4</td>

</tr>

</table>

在這個例子中，我們首先定義了表格的背景顏色為紅色。然后，我們定義了第二個表格單元格的樣式，使其背景顏色為藍色。通過使用 style 屬性，我們可以對表格單元格的樣式進行定義，包括顏色、邊框、內邊距等。

如何使用 CSS 選擇器來修改表格的背景顏色呢？我們可以使用以下選擇器：

```css

tr:hover {

background-color: #f00; /* hover 模式下的背景顏色 */

這個選擇器將適用于所有處于鼠標懸停狀態的第一個表格單元格。當鼠標懸停在上面時，單元格背景顏色將變為紅色。

除了使用選擇器外，我們還可以使用偽元素來創建表格，并使用 CSS 調整偽元素的屬性，以實現變色效果。例如：

```html

<table>

<tr>

<td>單元格1</td>

<td>單元格2</td>

</tr>

<tr>

<td>單元格3</td>

<td>單元格4</td>

</tr>

</table>

<style>

table {

border-collapse: collapse;

tr:hover {

background-color: #f00;

border: 1px solid #ccc;

padding: 10px;

</style>

在這個例子中，我們定義了一個名為 table 的 CSS 類，用于定義整個表格的樣式。我們還定義了三個 tr 元素，每個元素都包含一個 td 元素。當鼠標懸停在表格上時，我們將 tr:hover 選擇器應用于每個 td 元素，使其背景顏色變為紅色。

通過使用 CSS 實現表格單元格的變色效果，可以為用戶提供有趣的網頁體驗，并且可以提高網頁的可讀性和吸引力。