Поменять курсор на руку, когда мышь наведется на строку в таблице

Question

Как изменить указатель курсора на руку, когда моя мышь переходит <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>

Answer 1

Вы можете сделать это с помощью CSS.

.sortable tr {
    cursor: pointer;
}

Answer 2

Я немного искал стили начальной загрузки и нашел это:

[role=button]{cursor:pointer}

Так что я предполагаю, что вы можете получить то, что вы хотите:

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

Answer 3

Самый простой способ, который я нашел, это добавить

style="cursor: pointer;"

к вашим тегам.

Answer 4

Добавьте cursor: pointer к вашему CSS.

Answer 5

Я добавил это в свой style.css для управления параметрами курсора:

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

Answer 6

Для совместимости с IE <6 используйте этот стиль в следующем порядке: </p>

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

Но помните, что IE <7 поддерживает <code>:hover псевдокласс только с элементом <a>.

Answer 7

Используйте стиль cursor: pointer; в CSS для элемента, на котором вы хотите изменить курсор.

В вашем случае вы должны использовать (в вашем файле .css):

.sortable {
    cursor: pointer;
}

Answer 8

Используйте свойство CSS cursor следующим образом:

<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 и применить его к классу.

Answer 9

Использование css

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

Answer 10

только для стандарта вышеупомянутые решения работают, но если вы используете datatables, вы должны переопределить настройки datatatables.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>