Afficher des éléments d'un tableau uniquement au survol de la ligne

L'affichage d'éléments actionnables au survol d'une ligne au sein d'une liste évite de surcharger l'interface cliente, et contribue à améliorer la lisibilité d'un site Web.

L'affichage d'éléments actionnables uniquement au survol d'une ligne d'une liste est une pratique de plus en plus répandue car elle permet de proposer par défaut une interface sobre et de ne "surcharger" que la ligne sur laquelle on travaille.

C'est notamment l'effet utilisé dans l'admin de Wordpress pour la gestion des commentaires.

Contrairement à ce que certains pourraient penser, pas besoin de Javascript pour arriver à produire ce résultat, CSS fait très bien l'affaire !
 

 <table>
 <tr>
   <td>Nom</td>
   <td>Prénom</td>
   <td><div class="actions">Editer</div></td>
 </tr>
</table>

 .actions {
 visibility: hidden;
}
tr:hover .actions {
 visibility: visible;
}

En utilisant la class directement sur le td, le survol du td seul ne permet pas d'afficher les actions ce qui rend le principe caduc.

Ce contenu a été réalisé par le blog accolade.ch (Raphaël Emourgeon) sous licence Creative Commons.