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

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

Ответ 1

Вы можете сделать это без javascript.

.sortable tr {
    cursor: pointer;
}

Ответ 2

Я немного искал стили bootstrap и нашел это:

[role=button]{cursor:pointer}

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

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

Ответ 3

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

style="cursor: pointer;"

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

Ответ 4

Добавьте cursor: pointer в ваш css.

Ответ 5

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

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

.sortable {
    cursor: pointer;
}

Ответ 6

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

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

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

Ответ 7

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

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

Ответ 8

Используйте свойство курсора 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

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

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

Ответ 10

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