当鼠标经过表中的一行时,将光标更改为手

当我的鼠标在<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>
494749 次浏览

cursor: pointer添加到css中。

在CSS中使用样式cursor: pointer;用于你想要光标更改的元素。

在你的例子中,你会使用(在你的.css文件中):

.sortable {
cursor: pointer;
}

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

使用css

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

你可以用CSS来做这个。

.sortable tr {
cursor: pointer;
}

我发现最简单的方法就是相加

style="cursor: pointer;"

到你的标签。

兼容IE <按以下顺序使用:

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

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

我在style.css中添加了这个来管理游标选项:

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

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

[role=button]{cursor:pointer}

所以我认为你可以得到你想要的:

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

对于只是一个标准的解决方案,但如果你使用的是数据表,你必须覆盖默认的datatatable .css设置,并添加以下代码自定义css,在下面的代码行选择是类,我添加的数据表显示在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>

内联样式的示例:

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