jquery 鼠标经过显示该行的编辑和删除链接

封面图 • 2025-12-02 • jQuery

你可以使用 jQuery 来实现“鼠标经过某一行时显示编辑和删除链接”的功能。下面是一个简单的示例，展示如何实现这个效果。

---

### ✅ HTML 示例

```html
<table id="myTable" border="1">
  <tr>
    <td>Row 1 Data</td>
    <td>
      <a href="#" class="edit">Edit</a>
      <a href="#" class="delete">Delete</a>
    </td>
  </tr>
  <tr>
    <td>Row 2 Data</td>
    <td>
      <a href="#" class="edit">Edit</a>
      <a href="#" class="delete">Delete</a>
    </td>
  </tr>
</table>
```

---

### 📌 CSS 隐藏编辑和删除链接（默认不显示）

```css
.edit, .delete {
  display: none;
}
```

---

### 💡 jQuery 实现：鼠标悬停时显示链接

```javascript
$(document).ready(function() {
  $('#myTable tr').hover(
    function() {
      // 鼠标进入时显示编辑和删除链接
      $(this).find('.edit, .delete').show();
    },
    function() {
      // 鼠标离开时隐藏编辑和删除链接
      $(this).find('.edit, .delete').hide();
    }
  );
});
```

---

### ✅ 效果说明

- 当鼠标**悬停在表格行**上时，该行中的 **“Edit” 和 “Delete”** 链接会显示出来。
- 当鼠标**移出该行**时，链接会再次隐藏。

---

### 🛠️ 可选增强功能

如果你希望只在特定列中显示这些链接，可以修改 jQuery 选择器：

```javascript
$('#myTable tr td:last-child').hover(...)
```

或者为每一行添加一个 `class` 来控制显示逻辑。

---

### 🧠 注意事项

- 如果你使用的是动态生成的表格行（如通过 AJAX），请确保在 DOM 加载完成后才绑定事件。
- 如果你需要点击“Edit”或“Delete”执行操作，可以再为它们绑定点击事件。

---

如果你需要完整的代码示例或想让这些链接在点击后执行某些操作，欢迎继续提问！