Змініть курсор вручну, коли миша переходить рядок таблиці

201

Як змінити вказівник курсору на руку, коли миша переходить <tr>на a<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;
}

— небезпекаЧіхуахуа007
джерело

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

— Gabe Hiemstra

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

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

— Renu
джерело

Що вище рішення?

— Кмейкснер

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
джерело