Je me rappelle avoir donné un coup d’essai à l’appication TweetDeck et j’aimais bien la configuration de l’affichage des tweets : juste le nom avec le message, en survolant le message avec la souris les icônes d’options (retweet, etc.) apparaissaient en gris pour ensuite s’illuminer individuellement en plaçant le curseur au-dessus.

Il y a plein de situations sur le web qui peuvent bénéficier de cette façon de présenter le contenu et en plus il est très facile d’atteindre ce but. Simplifions le tout pour s’attarder plus spécifiquement aux principes en place en établissant cette présentation de base qui utilisera la propriété d’opacité pour réaliser l’effet voulu :

HTML


<div class="contenant">
     <div>carré</div>
     <div>triangle</div>
     <div>cercle</div>
</div>

 

Ce que l’on imagine donnera quelque chose dans ce style :

Exemple 1

 

Normalement, on gère le tout un peu comme ceci :

CSS


div { opacity: 1.0; }
div:hover {   opacity: 0.3; }

 

Pour réussir ce genre de résultat :

Exemple 2

Mais pour ensuite obtenir un effet sur les éléments eux-mêmes, on multiplie les règles hover? Na, ya beaucoup plus simple! On va d’abord ajouter la propriété suivante à ces éléments :

 

CSS


.contenant:hover > div {opacity: 0.3;}

 

Ensuite on fait apparaître les éléments individuels seulement si le contenant ET le contenu est survolé. Et voilà le travail!

 

CSS


.contenant:hover > div:hover {opacity: 1.0;}

 

Exemple 3

 

 

Commenter