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

201

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

html css cursor

— Зеешан Ранг
источник

Для интерактивного фрагмента кода проверьте мой ответ

— fmagno

350

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

.sortable tr {
    cursor: pointer;
}

— dangerChihuahua007
источник

21

Это будет прекрасно работать без :hover. cursorопределяет, на что меняется курсор, когда ваша мышь находится над ним.

— Джеймс Монтань

3

Есть ли шанс, что вы можете изменить этот ответ, чтобы удалить ненужные :hover? Вопрос все еще привлекает внимание спустя 2 года, и было бы хорошо, если бы принятый ответ не предлагал использовать :hoverбез необходимости. Я думаю, что это приводит к неправильному пониманию того, как cursorработает, и подразумевает, что :hoverэто необходимо для изменения курсора.

— Джеймс Монтань

203

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

[role=button]{cursor:pointer}

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

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

— Иван
источник

Это было приятно для любителей начальной загрузки, но этот вопрос не затрагивает какую-либо переднюю структуру, поэтому я не понимаю, почему этот ответ имеет отношение к вопросу (даже если ответ отличный)

— Греко Джонатан

@Hooli, по состоянию на 6-2018, эта публикация теперь является лучшим результатом при поиске «значка начальной загрузки с указателем при наведении курсора».

— BrianHVB

1

@ OlivierBoissé Только что протестирован, и он определенно работает с BS 4

— Гейб Химстра

1

Важно: не добавляйте, role="button"когда хотите добавить style="cursor:pointer;". Во-первых, ваш элемент зависит от того, какой CSS-код определен в другом месте (и не будет переопределен в другом месте), и, самое главное, вы неправильно используете roleатрибут просто потому, что большинству пользователей он не нужен. Обратите внимание, что большинство программ чтения с экрана позволяют перебирать [role=button]элементы, предоставляя пользователям с ограниченными возможностями доступа к Интернету возможность быстрого просмотра всех кнопок страницы. Не заставляйте их проходить через все строки таблицы, чтобы попасть в ссылки нижнего колонтитула!

— дао

75

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

style="cursor: pointer;"

на ваши теги.

— Ира Герман
источник

23

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

— Джеймс Монтань
источник

17

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

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

— xackobo
источник

1

не хорошо, если вы вводите опечатки по пути (см. «Перекрестие»)

— наблюдатель

12

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

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

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

— Ubique
источник

10

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

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

.sortable {
    cursor: pointer;
}

— Четан
источник

9

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

— EverPresent
источник

4

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

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

— Альфа
источник

3

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

— Рену
источник

Какое решение выше?

— Kmeixner

2

Пример со встроенными стилями:

<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>

Развернуть фрагмент

— fmagno
источник