Zmień kursor na rękę, gdy mysz znajdzie się nad wierszem w tabeli

201

Jak mogę zmienić wskaźnik kursora na dłoni, gdy mój myszy przechodzi ponad <tr>w 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 Zeeshan Rang
źródło
Interaktywny fragment kodu sprawdź moją odpowiedź
fmagno

Odpowiedzi:

350

Możesz to zrobić za pomocą CSS.

.sortable tr {
    cursor: pointer;
}
niebezpieczeństwoChihuahua007
źródło
21
Będzie to działać idealnie bez :hover. cursorokreśla, do czego zmienia się kursor, gdy wskaźnik myszy znajdzie się nad nim.
James Montagne
3
Czy jest szansa, że ​​możesz zmodyfikować tę odpowiedź, aby usunąć niepotrzebne :hover? Pytanie wciąż przyciąga uwagę 2 lata później i byłoby miło, gdyby zaakceptowana odpowiedź nie sugerowała :hoverniepotrzebnego używania . Myślę, że prowadzi to do nieporozumienia jak cursordziała i sugeruje, że:hover jest to konieczne do zmiany kursora.
James Montagne
203

Przeszukałem trochę style bootstrap i znalazłem to:

[role=button]{cursor:pointer}

Zakładam, że możesz dostać to, co chcesz:

<span role="button">hi</span>
Ivan
źródło
To było miłe dla miłośników bootstrapu, ale pytanie nie dotyczy żadnego frameworku, więc nie rozumiem, dlaczego ta odpowiedź jest odpowiednia dla pytania (nawet jeśli odpowiedź jest świetna)
Greco Jonathan
@Hooli od 6-2018 jest to najwyższy wynik podczas wyszukiwania „ikony zmiany bootstrapu na wskaźnik po najechaniu myszą”.
BrianHVB,
1
@ OlivierBoissé Właśnie przetestowałem i na pewno
DZIAŁA
1
Ważne: Nie dodawaj, role="button"kiedy chcesz dodać style="cursor:pointer;". Po pierwsze, twój element zależy od tego, czy CSS jest zdefiniowany gdzie indziej (i nie zostanie zastąpiony gdzie indziej) i, co najważniejsze, niewłaściwierole używasz atrybutu , po prostu dlatego, że większość użytkowników go nie potrzebuje. Zauważ, że większość czytników ekranu pozwala na iterację po [role=button]elementach, dając użytkownikom z dostępem do sieci możliwość szybkiego przejścia przez wszystkie przyciski strony. Nie zmuszaj ich, aby musieli przejść przez każdy wiersz tabeli, aby dostać się do linków stopki!
tao
75

Najprostszym sposobem, jaki znalazłem, jest dodanie

style="cursor: pointer;"

do twoich tagów.

Ira Herman
źródło
23

Dodaj cursor: pointerdo swojego css.

James Montagne
źródło
17

Dodałem to do mojego style.css, aby zarządzać opcjami kursora:

.cursor-pointer{cursor: pointer;}
.cursor-croshair{cursor: crosshair;}
.cursor-eresize{cursor: e-resize;}
.cursor-move{cursor: move;}
xackobo
źródło
1
źle, jeśli po drodze wprowadzisz literówki (patrz „celownik”)
obserwator,
12

Aby zachować zgodność z IE <6, użyj tego stylu w tej kolejności:

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

Pamiętaj jednak, że IE <7 obsługuje :hoverpseudoklasę tylko z <a>elementem.

UbiQue
źródło
10

Użyj stylu cursor: pointer;w CSS dla elementu, na którym chcesz zmienić kursor.

W twoim przypadku użyłbyś (w pliku .css):

.sortable {
    cursor: pointer;
}
Chetan
źródło
9

Użyj właściwości kursora CSS w następujący sposób:

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

Oczywiście powinieneś umieścić styl w pliku CSS i zastosować go do klasy.

EverPresent
źródło
4

Korzystanie z css 

table tr:hover{cursor:pointer;} /* For all tables*/
table.sortable tr:hover{cursor:pointer;} /* only for this one*/
Alfa
źródło
3

dla standardu powyższe rozwiązania działają, ale jeśli używasz danych, musisz przesłonić domyślne ustawienia datatatables.css i dodać następujący kod do niestandardowego css, w poniższym kodzie wyboru wiersza jest klasa, którą dodałem na danych jak pokazano w html.

table.row-select.dataTable tbody td
{
cursor: pointer;    
}

A Twój HTML będzie wyglądał jak poniżej:

<table datatable="" dt-options="dtOptions1" dt-columns="dtColumns1" class="table table-striped table-bordered table-hover row-select"  id="datatable"></table>
Renu
źródło
Jakie jest powyższe rozwiązanie?
Kmeixner
2

Przykład z wbudowanymi stylami:

<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>
Rozwiń fragment kodu

fmagno
źródło