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

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