jQuery鼠标经过高亮显示当前行

封面图 • 2025-12-02 • jQuery

在 jQuery 中，可以通过 `mouseenter` 和 `mouseleave` 事件来实现“鼠标经过高亮显示当前行”的效果。下面是一个简单的示例，展示如何为表格中的每一行添加高亮效果。

---

### ✅ 示例：表格行高亮

```html
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>jQuery 鼠标高亮行</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        tr {
            cursor: pointer;
        }
        tr:hover {
            background-color: #f0f0f0;
        }
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>

</body>
</html>
```

---

### 🔍 说明：

- 使用 `mouseenter` 和 `mouseleave` 事件来控制高亮。
- `.highlight` 是一个 CSS 类，用于设置高亮样式（如背景色）。
- 也可以直接使用 CSS 的 `:hover` 伪类实现类似效果，但 jQuery 可以更灵活地处理动态内容或复杂逻辑。

---

### 🔄 如果你想要点击后保持高亮：

可以加上点击事件，让某一行被点击后保持高亮状态：

```javascript
$('tr').on('click', function () {
    $('tr').removeClass('highlight'); // 移除所有高亮
    $(this).addClass('highlight');   // 当前行高亮
});
```

---

如果你有特定的 HTML 结构或者需要更复杂的交互，请告诉我，我可以提供更定制化的代码。