blocks|key|650255|text|实际上，你可以用CSS来做这件事。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|650256|.sortable+tr+{
++++cursor:+pointer;
}|code-block|syntax|javascript|650257|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You can do this with CSS actually.</p>

<pre><code>.sortable tr {
    cursor: pointer;
}
</code></pre>


blocks|key|650511|text|我搜索了一下bootstrap风格，发现了以下内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|650512|[role=button]{cursor:pointer}|code-block|syntax|javascript|650513|所以我假设你可以通过以下方式得到你想要的东西：|650514|<span+role="button">hi</span>|650515|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>I've searched bootstrap styles a bit and found this:</p>

<pre><code>[role=button]{cursor:pointer}
</code></pre>

<p>So I assume you can get what you want with:</p>

<pre><code>&lt;span role="button"&gt;hi&lt;/span&gt;
</code></pre>


blocks|key|435859|text|我找到的最简单的方法是添加|type|unstyled|depth|inlineStyleRanges|entityRanges|data|435860|style="cursor:+pointer;"|code-block|syntax|javascript|435861|到你的标签上。|435862|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>The easiest way I've found is to add</p>

<pre><code>style="cursor: pointer;"
</code></pre>

<p>to your  tags.</p>


blocks|key|650108|text|将cursor:+pointer添加到您的css。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|650109|entityMap^0|1|F|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>Add <code>cursor: pointer</code> to your css.</p>


blocks|key|436059|text|我将这个添加到我的style.css中，以管理光标选项：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|436060|.cursor-pointer{cursor:+pointer;}
.cursor-croshair{cursor:+crosshair;}
.cursor-eresize{cursor:+e-resize;}
.cursor-move{cursor:+move;}|code-block|syntax|javascript|436061|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I added this to my style.css to manage cursor options:</p>

<pre><code>.cursor-pointer{cursor: pointer;}
.cursor-croshair{cursor: crosshair;}
.cursor-eresize{cursor: e-resize;}
.cursor-move{cursor: move;}
</code></pre>


blocks|key|435779|text|在CSS中为希望光标更改的元素使用样式cursor:+pointer;。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|435780|在您的示例中，您将使用(在.css文件中)：|435781|.sortable+{
++++cursor:+pointer;
}|code-block|syntax|javascript|435782|entityMap^0|J|G|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|S|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

<p>Use the style <code>cursor: pointer;</code> in the CSS for the element you want the cursor to change on.</p>

<p>In your case, you would use (in your .css file):</p>

<pre><code>.sortable {
    cursor: pointer;
}
</code></pre>


blocks|key|650384|text|为了与IE+<6兼容，请按如下顺序使用此样式：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|650385|.sortable:hover+{
++++cursor:+pointer;
++++cursor:+hand;
}|code-block|syntax|javascript|650386|但请记住，IE+<7仅支持使用<a>元素的:hover伪类。|offset|length|style|CODE|650387|entityMap^0|0|0|F|3|L|6|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]|$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|N|$]]

<p>For compatibility with IE &lt; 6 use this style in that order:</p>

<pre><code>.sortable:hover {
    cursor: pointer;
    cursor: hand;
}
</code></pre>

<p>But remember that IE &lt; 7 supports <code>:hover</code> pseudoclass only with <code>&lt;a&gt;</code> element.</p>


blocks|key|650649|text|具有内联样式的示例：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|650650|​|650651|<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>|code-block|syntax|javascript|650652|650653|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>Example with styles inline:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
  &lt;tr&gt; &lt;td style="cursor: pointer;"&gt;mouse me over: pointer&lt;/td&gt; &lt;/tr&gt;
  &lt;tr&gt; &lt;td style="cursor: wait;"&gt;mouse me over: wait&lt;/td&gt; &lt;/tr&gt;
  &lt;tr&gt; &lt;td style="cursor: zoom-in;"&gt;mouse me over: zoom-in&lt;/td&gt; &lt;/tr&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>


blocks|key|435809|text|使用css|type|unstyled|depth|inlineStyleRanges|entityRanges|data|435810|table+tr:hover{cursor:pointer;}+/*+For+all+tables*/
table.sortable+tr:hover{cursor:pointer;}+/*+only+for+this+one*/|code-block|syntax|javascript|435811|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Using css </p>

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


blocks|key|436220|text|对于一个标准，上面的解决方案是有效的，但如果你使用的是数据表，你必须覆盖默认的datatatables.css设置，并在下面的代码中添加以下代码到自定义css中-行选择是我在数据表上添加的类，如html所示。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|436221|table.row-select.dataTable+tbody+td
{
cursor:+pointer;++++
}|code-block|syntax|javascript|436222|您的html将如下所示：|436223|<table+datatable=""+dt-options="dtOptions1"+dt-columns="dtColumns1"+class="table+table-striped+table-bordered+table-hover+row-select"++id="datatable"></table>|436224|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>for just a standard the above solutions work, but if you are using datatables, you have to override the default datatatables.css settings and add the following code to custom css, In the code below row-select is the class that I added on datatables as shown in the html.</p>

<pre><code>table.row-select.dataTable tbody td
{
cursor: pointer;    
}
</code></pre>

<p>And you html will look as below:</p>

<pre><code>&lt;table datatable="" dt-options="dtOptions1" dt-columns="dtColumns1" class="table table-striped table-bordered table-hover row-select"  id="datatable"&gt;&lt;/table&gt;
</code></pre>


<p>How do I change the cursor pointer to hand when my mouse goes over a <code>&lt;tr&gt;</code> in a <code>&lt;table&gt;</code></p>

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


Change cursor to hand when mouse goes over a row in table

当鼠标经过<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>

问当鼠标移到表中的行上时，将光标更改为手形
EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当鼠标移到表中的行上时，将光标更改为手形EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当鼠标移到表中的行上时，将光标更改为手形
EN