ChatGPT解决这个技术问题 Extra ChatGPT

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

当我的鼠标经过 <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>
对于交互式代码片段,请检查我的答案

G
Gary

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

.sortable tr {
    cursor: pointer;
}

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

我搜索了一些引导样式,发现了这个:

[role=button]{cursor:pointer}

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

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

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

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

style="cursor: pointer;"

到您的标签。


J
James Montagne

cursor: pointer 添加到您的 CSS。


s
simonthesorcerer

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

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

如果您在此过程中引入拼写错误,那就不好了(请参阅“十字线”)
C
Chetan

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

在您的情况下,您将使用(在您的 .css 文件中):

.sortable {
    cursor: pointer;
}

U
UbiQue

为了与 IE < 6 兼容,请按以下顺序使用此样式:

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

但请记住,IE < 7 仅支持带有 <a> 元素的 :hover 伪类。


E
EverPresent

像这样使用 CSS 光标属性:

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


f
fmagno

内联样式示例:

鼠标悬停:pointer
鼠标悬停:wait< /td>
鼠标悬停:放大


T
The Alpha

使用 CSS

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

R
Renu

上述解决方案只是一个标准,但如果您使用的是数据表,则必须覆盖默认的 datatables.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>

以上解决方法是什么?