web-dev-qa-db-ja.com

マウスがテーブルの行の上に来たときにカーソルを手に変える

マウスが<tr>内の<table>上に移動したときにカーソルポインタを手に変更するにはどうすればよいですか

<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>
htmlcsscursor
177
Zeeshan Rang

あなたは実際にCSSでこれをすることができます。

.sortable tr {
    cursor: pointer;
}
315
dangerChihuahua007

私はブートストラップスタイルを少し検索しました、そしてこれを見つけました：

[role=button]{cursor:pointer}

だから私はあなたがあなたが望むものを手に入れることができると思います：

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

私が見つけた最も簡単な方法は追加することです

style="cursor: pointer;"

あなたのタグに。

65
Ira Herman

あなたのCSSにcursor: pointerを追加してください。

23
James Montagne

カーソルオプションを管理するために、これを私のstyle.cssに追加しました。

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

IE <6との互換性のために、以下の順序でこのスタイルを使用してください。

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

しかし、IE <7は:hover要素でのみ<a>疑似クラスをサポートすることを忘れないでください。

11
UbiQue

カーソルを合わせたい要素には、CSSのスタイルcursor: pointer;を使用します。

あなたのケースでは、あなたは（あなたの.cssファイルで）使うでしょう：

.sortable {
    cursor: pointer;
}
10
Chetan

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ファイルに入れてクラスに適用する必要があります。

9
EverPresent

Cssを使う

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

標準的には上記の解決策でうまくいきますが、データテーブルを使用している場合は、デフォルトのdatatatables.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>
3
Renu