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
source

Pour un extrait de code interactif, vérifiez ma réponse

— fmagno

350

Vous pouvez le faire avec CSS en fait.

.sortable tr {
    cursor: pointer;
}

— dangerChihuahua007
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
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
source

23

Ajoutez cursor: pointerà votre CSS.

— James Montagne
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
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
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
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
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
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
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
source