Changer le curseur en main lorsque la souris passe sur une ligne du tableau

201

Comment changer le pointeur du curseur à la main lorsque ma souris passe sur un <tr>dans un<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
la source
Pour un extrait de code interactif, vérifiez ma réponse
fmagno

Réponses:

350

Vous pouvez le faire avec CSS en fait.

.sortable tr {
    cursor: pointer;
}
dangerChihuahua007
la source
21
Cela fonctionnera parfaitement bien sans :hover. cursordéfinit ce que le curseur change lorsque votre souris est dessus.
James Montagne
3
Y a-t-il une chance que vous puissiez modifier cette réponse pour supprimer les inutiles :hover? La question retient toujours l'attention 2 ans plus tard et ce serait bien si la réponse acceptée ne suggérait pas de l'utiliser :hoverinutilement. Je pense que cela conduit à une mauvaise compréhension de la façon dont cursorfonctionne et implique que le :hoverest nécessaire pour changer le curseur.
James Montagne
203

J'ai un peu recherché les styles de bootstrap et j'ai trouvé ceci:

[role=button]{cursor:pointer}

Je suppose donc que vous pouvez obtenir ce que vous voulez avec:

<span role="button">hi</span>
Ivan
la source
C'était agréable pour les aficionados du bootstrap, mais la question n'implique aucun cadre avant, donc je ne comprends pas pourquoi cette réponse est pertinente avec la question (même si la réponse est excellente)
Greco Jonathan
@Hooli à partir du 6-2018, ce message est désormais le meilleur résultat lors de la recherche "icône de changement de bootstrap pour pointer sur le survol".
BrianHVB
1
@ OlivierBoissé Je viens de tester et ça marche vraiment avec BS 4
Gabe Hiemstra
1
Important: N'ajoutez pas role="button"lorsque vous souhaitez ajouter style="cursor:pointer;". Tout d'abord, votre élément dépend de la définition de ce CSS ailleurs (et non de sa substitution ailleurs) et, surtout, vous abusez de l' roleattribut , simplement parce que la plupart des utilisateurs n'en ont pas besoin. Notez que la plupart des lecteurs d'écran permettent d'itérer à travers des [role=button]éléments donnant aux utilisateurs ayant un problème d'accessibilité Web la possibilité de parcourir rapidement tous les boutons de la page. Ne les obligez pas à parcourir chacune des lignes du tableau pour accéder aux liens de pied de page!
tao
75

La façon la plus simple que j'ai trouvée est d'ajouter

style="cursor: pointer;"

à vos balises.

Ira Herman
la source
23

Ajoutez cursor: pointerà votre CSS.

James Montagne
la source
17

J'ai ajouté ceci à mon style.css pour gérer les options du curseur:

.cursor-pointer{cursor: pointer;}
.cursor-croshair{cursor: crosshair;}
.cursor-eresize{cursor: e-resize;}
.cursor-move{cursor: move;}
xackobo
la source
1
pas bon si vous introduisez des fautes de frappe le long du chemin (voir "croshair")
observateur
12

Pour la compatibilité avec IE <6, utilisez ce style dans cet ordre:

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

Mais rappelez-vous que IE <7 ne prend en charge la :hoverpseudoclasse qu'avec <a>élément.

UbiQue
la source
10

Utilisez le style cursor: pointer; dans le CSS pour l'élément sur lequel vous souhaitez que le curseur change.

Dans votre cas, vous utiliseriez (dans votre fichier .css):

.sortable {
    cursor: pointer;
}
Chétan
la source
9

Utilisez la propriété du curseur CSS comme ceci:

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

Bien sûr, vous devez mettre le style dans votre fichier CSS et l'appliquer à la classe.

EverPresent
la source
4

Utilisation de CSS 

table tr:hover{cursor:pointer;} /* For all tables*/
table.sortable tr:hover{cursor:pointer;} /* only for this one*/
L'Alpha
la source
3

pour juste un standard, les solutions ci-dessus fonctionnent, mais si vous utilisez des tables de données, vous devez remplacer les paramètres par défaut de datatatables.css et ajouter le code suivant au CSS personnalisé. comme indiqué dans le html.

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

Et votre html ressemblera à ci-dessous:

<table datatable="" dt-options="dtOptions1" dt-columns="dtColumns1" class="table table-striped table-bordered table-hover row-select"  id="datatable"></table>
Renu
la source
Quelle solution ci-dessus?
Kmeixner
2

Exemple avec des styles en ligne:

<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>
Développer l'extrait

fmagno
la source