当鼠标在表格的一行上方时，将光标更改为手形光标。

Question

如何在鼠标移到<table>的<tr>上时将光标指针更改为手形？

<table class="sortable" border-style:>
  <tr>
    <th class="tname">Name</th><th class="tage">Age</th>
  </tr>
  <tr><td class="tname">Jennifer</td><td class="tage">24</td></tr>
  <tr><td class="tname">Kate</td><td class="tage">36</td></tr>
  <tr><td class="tname">David</td><td class="tage">25</td></tr>
  <tr><td class="tname">Mark</td><td class="tage">40</td></tr>
</table>

- Zeeshan Rang

---

有关交互式代码片段，请查看我的答案。 - fmagno

Answer 1

实际上，你可以使用CSS来完成这个操作。

.sortable tr {
    cursor: pointer;
}

- dangerChihuahua007

Answer 2

我搜索了一下bootstrap的样式，发现了这个：

[role=button]{cursor:pointer}

所以我假设你可以通过以下方式得到你想要的：

<span role="button">hi</span>

- Ivan

---

这对于Bootstrap爱好者来说很不错，但问题并不涉及任何前端框架，所以我不明白为什么这个答案与问题相关（即使答案很好）。 - Greco Jonathan

@Hooli 截至2018年6月，当搜索“bootstrap change icon to pointer on hover”时，此帖子现在是排名最高的结果。 - Brian H.

@OlivierBoissé 刚刚测试过了，它绝对可以与BS 4一起使用。 - Gabe Hiemstra

重要提示：当您想添加 style="cursor:pointer;" 时，请不要添加 role="button"。首先，您的元素取决于在其他地方定义了该 CSS（并且没有被其他地方覆盖），最重要的是，您正在误用 role 属性，因为大多数用户不需要它。请注意，大多数屏幕阅读器允许迭代 [role=button] 元素，使得网络无障碍挑战用户能够快速浏览所有页面按钮。不要让他们必须浏览每个表格行才能到达页脚链接！ - tao

Answer 3

我发现最简单的方法是添加以下代码：

style="cursor: pointer;"

将其添加到您的标签中。

- Ira Herman

Answer 4

将 cursor: pointer 添加到你的 css。

- James Montagne

Answer 5

我在我的style.css中添加了以下内容来管理光标选项：

.cursor-pointer {cursor: pointer;}
.cursor-crosshair {cursor: crosshair;}
.cursor-eresize {cursor: e-resize;}
.cursor-move {cursor: move;}

- xackobo

Answer 6

在所需改变鼠标样式的元素的CSS中使用样式cursor: pointer;

在您的情况下，您需要在您的 .css 文件中使用以下样式：

.sortable {
    cursor: pointer;
}

- Chetan

Answer 7

为了兼容IE 6以下版本，请按照以下顺序使用此样式：

.sortable:hover {
    cursor: pointer;
    cursor: hand;
}

但请记住，IE < 7 仅支持在 <a> 元素上使用 :hover 伪类。

- UbiQue

Answer 8

内联样式的示例：

<table>
  <tr> <td style="cursor: pointer;">mouse me over: pointer</td> </tr>
  <tr> <td style="cursor: wait;">mouse me over: wait</td> </tr>
  <tr> <td style="cursor: zoom-in;">mouse me over: zoom-in</td> </tr>
</table>

- fmagno

Answer 9

像这样使用 CSS 的 cursor 属性：

<table class="sortable">
  <tr>
    <th class="tname">Name</th><th class="tage">Age</th>
  </tr>
  <tr style="cursor: pointer;"><td class="tname">Jennifer</td><td class="tage">24</td></tr>
  <tr><td class="tname">Kate</td><td class="tage">36</td></tr>
  <tr><td class="tname">David</td><td class="tage">25</td></tr>
  <tr><td class="tname">Mark</td><td class="tage">40</td></tr>
</table>

当然，您应该将样式放入CSS文件中，并将其应用于类。

- EverPresent

Answer 10

使用CSS

table tr:hover{cursor:pointer;} /* For all tables*/
table.sortable tr:hover{cursor:pointer;} /* only for this one*/

- The Alpha