Cambiare il cursore a portata di mano quando il mouse passa sopra una riga nella tabella di

131

Come faccio a cambiare il puntatore del cursore a portata di mano quando il mouse passa sopra un <tr> in un <table>Cambiare il cursore a portata di mano quando il mouse passa sopra una riga nella tabella di

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

fonte

2012-02-15 Zeeshan Rang

238

Si potrebbe fare questo senza javascript in realtà.

.sortable tr { 
    cursor: pointer; 
}

fonte

2012-02-15 04:06:22 dangerChihuahua007

+19

questo funzionerà perfettamente bene senza il ': hover'. 'cursor' definisce a cosa cambia il cursore quando ci si trova sopra il mouse. –

Qualche possibilità che tu possa modificare questa risposta per rimuovere il non necessario ': hover'? La domanda attira ancora l'attenzione 2 anni dopo e sarebbe bello se la risposta accettata non suggerisse di usare ': hover' inutilmente.Penso che porti a un fraintendimento di come 'cursor' funziona e implica che il': hover' è necessario per cambiare il cursore. –

Aggiungi cursor: pointer al CSS.

fonte

2012-02-15 04:03:33

Utilizzare lo stile cursor: pointer; nel CSS per l'elemento su cui si desidera che il cursore cambi.

Nel tuo caso, si usa (nel file css):

.sortable { 
    cursor: pointer; 
}

fonte

2012-02-15 04:03:44 Chetan

Usare il CSS cursore proprietà 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 si deve mettere lo stile nel tuo file CSS e applicalo alla classe.

fonte

2012-02-15 04:04:45 EverPresent

usando i CSS

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

fonte

2012-02-15 04:05:05

Il modo più semplice che ho trovato è quello di aggiungere

style="cursor: pointer;"

ai tag.

fonte

2012-06-14 17:58:32

Per la compatibilità con IE 6 < usare questo stile in questo ordine:

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

Ma ricordate che IE 7 supporta < :hover pseudoclasse solo con <a> elemento.

fonte

2014-03-18 12:37:06 UbiQue

ho aggiunto questo al mio style.css per gestire le opzioni di cursore:

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

fonte

2014-10-15 08:59:40 xackobo

non va bene se si introducono errori di battitura lungo il percorso (vedi "croshair") – observer

........... yink – Edward

162

Ho cercato stili bootstrap un po 'e abbiamo trovato questo:

[role=button]{cursor:pointer}

Quindi presumo si può ottenere quello che vuoi con:

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

fonte

2015-12-12 18:27:06 Ivan

Grazie, non ho notato questo stile specifico! Molto utile – realtebo

+15

Perfetto! Dovrebbe essere usato il modo giusto bootstrap. –

Soluzione elegante. –

solo per uno standard delle soluzioni di cui sopra funzionano, ma se si utilizza DataTable, si deve over cavalca le impostazioni predefinite datatatables.css e aggiungi il seguente codice al css personalizzato, Nel codice sottostante riga-seleziona è la classe che ho aggiunto sui datatables come mostrato nell'html.

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

E html guarderà come di seguito:

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

fonte

2016-04-14 13:30:21 Renu

Quale soluzione precedente? – Kmeixner

Cambiare il cursore a portata di mano quando il mouse passa sopra una riga nella tabella di

risposta

Problemi correlati