Afficher ou masquer un élément au survol : bouton Edit

Introduction

Apprenez à afficher ou masquer un élément lorsque la souris survole une section prédéterminée.

Dans cet exemple, une icône « edit » sera affichée lors du survol de la section « coordinates » de la page de détail du compte.

Étapes à suivre

1. Ajouter l’icône Edit au field panel

Glissez-déposez une icône, à côté de la boîte contenant le titre du field panel et enveloppez-la dans une boîte. Il est essentiel d’appliquer un wrap à l’icône qui ne sera affichée que lors du survol d’une section spécifique, car seule une boîte donne accès à « class name » dans l’onglet Attribute. Dans cet exemple, « hovertarger » a été utilisé comme nom de classe, mais n’importe quel nom peut être utilisé.

2. Masquer l’icône avant le survol

Pour masquer l’icône avant que la souris ne survole une section sélectionnée, ajoutez cette ligne de code dans la section CSS de la boîte autour de l’icône :

opacity:0;

À partir de ce moment, l’icône n’est plus visible.

3. Afficher l’icône au survol avec CSS

Ensuite, sélectionnez l’élément qui activera l’affichage de l’icône lors du survol. Dans cet exemple, le fieldpanel a été utilisé. Ajoutez un deuxième onglet style, auquel vous appliquez un état « hover » et cette ligne de code CSS :

& {
.hovertarget {
    opacity: 1 !important;
  }
}

Cela permettra à l’icône d’être affichée une fois que vous survolez le fieldpanel.

*Assurez-vous de faire correspondre le classname saisi à l’étape 1 dans ce code.

**En ajoutant « important » dans le code, vous placez cette valeur au-dessus de toute autre.

4. Adoucir la transition au survol

Pour rendre la transition plus fluide entre l’affichage ou non de l’icône, ajoutez « opacity 0.3s ease-in » à la section transition de la boîte contenant l’icône :

5. Assigner la commande Edit à l’icône

Comme dernière étape, bien sûr, déplacez le comportement qui déclenche la commande edit vers l’icône :

Conclusion

L’utilisation d’effets de survol pour afficher ou masquer des éléments, comme un bouton edit, améliore l’interface utilisateur en gardant le design épuré et interactif. L’application de règles CSS simples assure une transition fluide et offre une meilleure expérience utilisateur en révélant les éléments actionnables uniquement lorsque nécessaire.