web-dev-qa-db-fra.com

Change le curseur en main lorsque la souris survole une ligne du tableau

Comment changer le pointeur du curseur en 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>
htmlcsscursor
179
Zeeshan Rang

Vous pouvez le faire avec CSS en fait.

.sortable tr {
    cursor: pointer;
}
320
dangerChihuahua007

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

[role=button]{cursor:pointer}

Donc, je suppose que vous pouvez obtenir ce que vous voulez avec:

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

Le moyen le plus simple que j'ai trouvé est d'ajouter

style="cursor: pointer;"

à vos tags.

66
Ira Herman

Ajoutez cursor: pointer à votre css.

23
James Montagne

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

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

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

Mais rappelez-vous que IE <7 prend en charge la pseudo-classe :hover uniquement avec l'élément <a>.

11
UbiQue

Utilisez le style cursor: pointer; dans la feuille de style pour l'élément sur lequel vous souhaitez modifier le curseur.

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

.sortable {
    cursor: pointer;
}
10
Chetan

Utilisez la propriété CSS curseur 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 devriez mettre le style dans votre fichier CSS et l’appliquer à la classe.

9
EverPresent

Utiliser css

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

pour seulement 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 à un fichier CSS personnalisé. Dans le code ci-dessous, row-select est la classe que j'ai ajoutée à Datatables. comme indiqué dans le HTML.

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

Et vous html ressemblera à ce qui suit:

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