Cambia cursore a portata di mano quando il mouse passa sopra una riga della tabella

201

Come cambio il puntatore del cursore in mano quando il mouse passa sopra a <tr>in 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
fonte

Per uno snippet di codice interattivo, controlla la mia risposta

— fmagno,

350

Puoi farlo con CSS in realtà.

.sortable tr {
    cursor: pointer;
}

— dangerChihuahua007
fonte

21

Questo funzionerà perfettamente senza il :hover. cursordefinisce a cosa cambia il cursore quando il mouse è su di esso.

— James Montagne,

3

Qualche possibilità che tu possa modificare questa risposta per rimuovere il non necessario :hover? La domanda riceve ancora attenzione 2 anni dopo e sarebbe bello se la risposta accettata non suggerisse di usarla :hoverinutilmente. Penso che porti a un malinteso su come cursorfunziona e implica che :hoverè necessario per cambiare il cursore.

— James Montagne,

203

Ho cercato un po 'gli stili bootstrap e ho trovato questo:

[role=button]{cursor:pointer}

Quindi presumo che tu possa ottenere quello che vuoi con:

<span role="button">hi</span>

— Ivan
fonte

È stato bello per gli appassionati di bootstrap, ma la domanda non riguarda alcun framework frontale, quindi non capisco perché questa risposta sia pertinente con la domanda (anche se la risposta è ottima)

— Greco Jonathan

@Hooli dal 6-2018 questo post è ora il miglior risultato quando si cerca "l'icona di cambio bootstrap in puntatore al passaggio del mouse".

— BrianHVB,

1

@ OlivierBoissé Appena testato e sicuramente FUNZIONA con BS 4

— Gabe Hiemstra

1

Importante: non aggiungere role="button"quando si desidera aggiungere style="cursor:pointer;". Prima di tutto, il tuo elemento dipende dal fatto che i CSS siano definiti altrove (e non vengano sovrascritti altrove) e, cosa più importante, stai abusando roledell'attributo , semplicemente perché la maggior parte degli utenti non ne ha bisogno. Nota che la maggior parte degli screen reader consente di scorrere gli [role=button]elementi offrendo agli utenti con difficoltà di accessibilità web la possibilità di scorrere rapidamente tutti i pulsanti della pagina. Non farli passare attraverso ciascuna delle righe della tabella per raggiungere i collegamenti a piè di pagina!

— Tao,

75

Il modo più semplice che ho trovato è aggiungere

style="cursor: pointer;"

ai tuoi tag.

— Ira Herman
fonte

23

Aggiungi cursor: pointeral tuo CSS.

— James Montagne
fonte

17

Ho aggiunto questo al mio style.css per gestire le opzioni del cursore:

.cursor-pointer{cursor: pointer;}
.cursor-croshair{cursor: crosshair;}
.cursor-eresize{cursor: e-resize;}
.cursor-move{cursor: move;}

— xackobo
fonte

1

non va bene se si introducono errori di battitura lungo la strada (vedi "croshair")

— osservatore

12

Per compatibilità con IE <6 utilizzare questo stile nell'ordine seguente:

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

Ma ricorda che IE <7 supporta la :hoverpseudoclasse solo con l' <a>elemento.

— ubique
fonte

10

Usa lo stile cursor: pointer; nel CSS per l'elemento su cui vuoi che il cursore cambi.

Nel tuo caso, useresti (nel tuo file .css):

.sortable {
    cursor: pointer;
}

— Chetan
fonte

9

Utilizzare la proprietà cursore CSS in questo modo:

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

Ovviamente dovresti inserire lo stile nel tuo file CSS e applicarlo alla classe.

— Sempre presente
fonte

4

Utilizzando css

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

— L'Alfa
fonte

3

solo per uno standard le soluzioni di cui sopra funzionano, ma se si utilizzano i database, è necessario sovrascrivere le impostazioni predefinite di datatatables.css e aggiungere il codice seguente al CSS personalizzato, nel codice sotto row-select è la classe che ho aggiunto ai database come mostrato nell'html.

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

E il tuo html apparirà come di seguito:

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

— Renu
fonte

Quale soluzione sopra?

— Kmeixner,

2

Esempio con stili in linea:

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

Espandi frammento

— fmagno
fonte