it-swarm.com.de

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

Wie ändere ich den Cursor auf Hand, wenn sich meine Maus über einem <tr> In einem <table> Befindet?

<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>
179
Zeeshan Rang

Das kann man eigentlich mit CSS machen.

.sortable tr {
    cursor: pointer;
}
320

Ich habe die Stile von bootstrap ein wenig durchsucht 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>
199
Ivan

Der einfachste Weg, den ich gefunden habe, ist das Hinzufügen

style="cursor: pointer;"

zu Ihren Tags.

66
Ira Herman

Hinzufügen cursor: pointer zu deinem CSS.

23
James Montagne

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;}
16
xackobo

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

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

Beachten Sie jedoch, dass IE <7 :hover - Pseudoklassen nur mit dem Element <a> Unterstützt.

11
UbiQue

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

In Ihrem Fall verwenden Sie (in Ihrer CSS-Datei):

.sortable {
    cursor: pointer;
}
10
Chetan

Verwenden Sie die CSS Cursor -Eigenschaft 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.

9
EverPresent

CSS verwenden

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

nur für einen Standard funktionieren die oben genannten Lösungen. Wenn Sie jedoch Datentabellen verwenden, müssen Sie die Standardeinstellungen für datatatables.css überschreiben und benutzerdefiniertem CSS den folgenden Code hinzufügen wie im html gezeigt.

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

Und Sie HTML sehen wie folgt aus:

<table datatable="" dt-options="dtOptions1" dt-columns="dtColumns1" class="table table-striped table-bordered table-hover row-select"  id="datatable"></table>
3
Renu