当我的鼠标经过 <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>
实际上,您可以使用 CSS 来做到这一点。
.sortable tr {
cursor: pointer;
}
我搜索了一些引导样式,发现了这个:
[role=button]{cursor:pointer}
所以我假设你可以得到你想要的:
<span role="button">hi</span>
style="cursor:pointer;"
时不要添加 role="button"
。首先,您的元素依赖于在其他地方定义的 CSS(而不是在其他地方被覆盖),最重要的是,您 滥用了 role
属性,仅仅是因为大多数用户不需要它。请注意,大多数屏幕阅读器都允许遍历 [role=button]
元素,从而使有网络可访问性的用户能够快速浏览所有页面按钮。不要让他们必须遍历表格的每一行才能到达页脚链接!
我发现的最简单的方法是添加
style="cursor: pointer;"
到您的标签。
将 cursor: pointer
添加到您的 CSS。
我将此添加到我的 style.css 以管理光标选项:
.cursor-pointer{cursor: pointer;}
.cursor-croshair{cursor: crosshair;}
.cursor-eresize{cursor: e-resize;}
.cursor-move{cursor: move;}
使用 CSS 中的样式 cursor: pointer;
作为您希望光标更改的元素。
在您的情况下,您将使用(在您的 .css 文件中):
.sortable {
cursor: pointer;
}
为了与 IE < 6 兼容,请按以下顺序使用此样式:
.sortable:hover {
cursor: pointer;
cursor: hand;
}
但请记住,IE < 7 仅支持带有 <a>
元素的 :hover
伪类。
像这样使用 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 文件并将其应用于类。
内联样式示例:
鼠标悬停:pointer |
鼠标悬停:wait< /td> |
鼠标悬停:放大 |
使用 CSS
table tr:hover{cursor:pointer;} /* For all tables*/
table.sortable tr:hover{cursor:pointer;} /* only for this one*/
上述解决方案只是一个标准,但如果您使用的是数据表,则必须覆盖默认的 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>
不定期副业成功案例分享
:hover
,这将完全正常。cursor
定义当鼠标悬停在光标上时光标变为什么。:hover
? 2 年后这个问题仍然受到关注,如果接受的答案不是建议不必要地使用:hover
,那就太好了。我认为这会导致对cursor
工作原理的误解,并暗示需要:hover
来更改光标。