Ändern Sie den Cursor in die Hand, wenn die Maus über eine Zeile in der Tabelle fährt

201

Wie ändere ich den Cursorzeiger auf Hand, wenn meine Maus über a <tr>in a fährt?<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
quelle
Für ein interaktives Code-Snippet überprüfen Sie meine Antwort
fmagno

Antworten:

350

Sie können dies tatsächlich mit CSS tun.

.sortable tr {
    cursor: pointer;
}
gefahrChihuahua007
quelle
21
Dies wird ohne die einwandfrei funktionieren :hover. cursorDefiniert, in was sich der Cursor ändert, wenn sich die Maus darüber befindet.
James Montagne
3
Gibt es eine Möglichkeit, diese Antwort zu ändern, um nicht benötigte zu entfernen :hover? Die Frage erhält auch 2 Jahre später noch Aufmerksamkeit und es wäre schön, wenn die akzeptierte Antwort nicht darauf hindeuten würde, sie :hoverunnötig zu verwenden. Ich denke, es führt zu einem Missverständnis der Funktionsweise cursorund impliziert, dass das :hoverzum Ändern des Cursors erforderlich ist.
James Montagne
203

Ich habe ein bisschen nach Bootstrap-Stilen gesucht und Folgendes gefunden:

[role=button]{cursor:pointer}

Ich gehe also davon aus, dass Sie bekommen können, was Sie wollen:

<span role="button">hi</span>
Ivan
quelle
Es war schön für Bootstrap-Liebhaber, aber die Frage beinhaltet kein Front-Framework, daher verstehe ich nicht, warum diese Antwort für die Frage relevant ist (auch wenn die Antwort großartig ist)
Greco Jonathan
@Hooli ab 6-2018 Dieser Beitrag ist jetzt das Top-Ergebnis bei der Suche nach "Bootstrap-Änderungssymbol zum Zeiger auf Hover".
BrianHVB
1
@ OlivierBoissé Gerade getestet und es funktioniert definitiv mit BS 4
Gabe Hiemstra
1
Wichtig: Nicht hinzufügen, role="button"wenn Sie hinzufügen möchten style="cursor:pointer;". Zunächst einmal hängt Ihr Element davon ab, dass das CSS an anderer Stelle definiert (und an keiner anderen Stelle überschrieben) wird, und vor allem missbrauchen Sie das roleAttribut , einfach weil die meisten Benutzer es nicht benötigen. Beachten Sie, dass die meisten Bildschirmleseprogramme das Durchlaufen von [role=button]Elementen ermöglichen, die Benutzern mit eingeschränkter Webzugriffsfähigkeit die Möglichkeit geben, schnell alle Seitenschaltflächen durchzugehen. Lassen Sie sie nicht jede Zeile der Tabelle durchgehen, um zu den Fußzeilenlinks zu gelangen!
Tao
75

Der einfachste Weg, den ich gefunden habe, ist hinzuzufügen

style="cursor: pointer;"

zu Ihren Tags.

Ira Herman
quelle
23

Fügen Sie cursor: pointerIhrem CSS hinzu.

James Montagne
quelle
17

Ich habe dies zu meiner style.css hinzugefügt, um die Cursoroptionen zu verwalten:

.cursor-pointer{cursor: pointer;}
.cursor-croshair{cursor: crosshair;}
.cursor-eresize{cursor: e-resize;}
.cursor-move{cursor: move;}
Xackobo
quelle
1
nicht gut, wenn Sie Tippfehler auf dem Weg einführen (siehe "Croshair")
Beobachter
12

Verwenden Sie zur Kompatibilität mit IE <6 diesen Stil in der folgenden Reihenfolge:

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

Denken Sie jedoch daran, dass IE <7 :hoverPseudoklasse nur mit <a>Element unterstützt.

UbiQue
quelle
10

Verwenden Sie den Stil cursor: pointer;im CSS für das Element, auf dem sich der Cursor ändern soll.

In Ihrem Fall würden Sie (in Ihrer CSS-Datei) Folgendes verwenden:

.sortable {
    cursor: pointer;
}
Chetan
quelle
9

Verwenden Sie die CSS- Cursoreigenschaft wie folgt:

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

Natürlich sollten Sie den Stil in Ihre CSS-Datei einfügen und auf die Klasse anwenden.

Immer präsent
quelle
4

Mit CSS 

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

Für nur einen Standard funktionieren die oben genannten Lösungen. Wenn Sie jedoch Datentabellen verwenden, müssen Sie die Standardeinstellungen von datatatables.css überschreiben und den folgenden Code zu benutzerdefiniertem CSS hinzufügen. Im folgenden Code ist die Zeilenauswahl die Klasse, die ich für Datentabellen hinzugefügt habe wie im HTML gezeigt.

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

Und Sie HTML wird wie folgt aussehen:

<table datatable="" dt-options="dtOptions1" dt-columns="dtColumns1" class="table table-striped table-bordered table-hover row-select"  id="datatable"></table>
Renu
quelle
Was oben Lösung?
Kmeixner
2

Beispiel mit Inline-Stilen:

<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>
Erweitern Sie das Snippet

fmagno
quelle