当鼠标移过表格中的一行时将光标更改为手形答案

【问题标题】：Change cursor to hand when mouse goes over a row in table当鼠标移过表格中的一行时将光标更改为手形
【发布时间】：2012-03-06 11:00:42
【问题描述】：

当我的鼠标移到<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>

【问题讨论】：

对于交互式代码 sn-p 检查我的答案

标签： html css mouse-cursor

【解决方案1】：

您实际上可以使用 CSS 来做到这一点。

.sortable tr {
    cursor: pointer;
}

【讨论】：

如果没有:hover，这将完全正常工作。 cursor 定义当鼠标悬停在光标上时光标的变化。
您是否有机会修改此答案以删除不需要的:hover？两年后这个问题仍然受到关注，如果接受的答案不是建议不必要地使用:hover，那就太好了。我认为这会导致对cursor 工作原理的误解，并暗示需要:hover 来更改光标。

【解决方案2】：

我搜索了一些引导样式，发现了这个：

[role=button]{cursor:pointer}

所以我假设你可以得到你想要的：

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

【讨论】：

这对bootstrap爱好者来说很好，但是问题不涉及任何前端框架，所以我不明白为什么这个答案与问题相关（即使答案很好）
@Hooli 截至 2018 年 6 月，此帖子现在是搜索“引导将图标更改为悬停时的指针”时的最高结果。
@OlivierBoissé 刚刚测试过，它绝对可以与 BS 4 一起使用
重要提示：当你想添加style="cursor:pointer;"时不要添加role="button"。首先，您的元素依赖于在其他地方定义的 CSS（而不是在其他地方被覆盖），最重要的是，您 滥用了role 属性，仅仅是因为大多数用户不需要它。请注意，大多数屏幕阅读器允许遍历 [role=button] 元素，从而使 Web 可访问性受到挑战的用户能够快速浏览所有页面按钮。不要让他们必须遍历表格的每一行才能到达页脚链接！

【解决方案3】：

我发现的最简单的方法是添加

style="cursor: pointer;"

到你的标签。

【讨论】：

【解决方案4】：

将cursor: pointer 添加到您的CSS。

【讨论】：

【解决方案5】：

我将此添加到我的 style.css 以管理光标选项：

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

【讨论】：

如果你在过程中引入错别字，那就不好了（参见“十字线”）

【解决方案6】：

在 CSS 中为您希望光标更改的元素使用样式 cursor: pointer;。

在你的情况下，你会使用（在你的 .css 文件中）：

.sortable {
    cursor: pointer;
}

【讨论】：

【解决方案7】：

为了与 IE

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

但请记住，IE <a> 元素的 :hover 伪类。

【讨论】：

【解决方案8】：

像这样使用 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 文件并将其应用于类。

【讨论】：

【解决方案9】：

内联样式示例：

<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>

【讨论】：

【解决方案10】：

使用 css

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

【讨论】：

【解决方案11】：

上述解决方案只是一个标准，但如果您使用数据表，则必须覆盖默认的 datatatables.css 设置并将以下代码添加到自定义 css，在下面的代码中，row-select 是我的类添加到数据表中，如 html 所示。

table.row-select.dataTable tbody td
{
cursor: pointer;    
}

您的 html 将如下所示：

<table datatable="" dt-options="dtOptions1" dt-columns="dtColumns1" class="table table-striped table-bordered table-hover row-select"  id="datatable"></table>

【讨论】：

以上解决方法是什么？