28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Voici ce qu'on m'a proposé comme code pour changer le style d'un texte sur une info bulle:
a.info {
   position: relative;
   color: red;/*ondirait que c'est pas important ça*/
   text-decoration: none;/*ondirait que c'est pas important ça*/
   border-bottom: 1px gray dotted; /* On souligne le texte. *//*ondirait que c'est pas important ça*/
}
a.info span {
   display: none; /* On masque l'infobulle. */
}
a.info:hover {
   background: none; /* Correction d'un bug d'Internet Explorer. */
   z-index: 500; /* On définit une valeur pour l'ordre d'affichage. */

   cursor: help; /* On change le curseur par défaut par un curseur d'aide. */
}
a.info:hover span{
display: inline; /* On affiche l'infobulle. */
   position: absolute;
   white-space: nowrap; /* On change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non désiré. */
   top: 25px; /* On positionne notre infobulle. */
   left: -160px;
   background: white;
   color: black;
font-size: 30px;
   padding: 3px;
   border: 1px solid grey;
   border-left: 2px solid grey;
}
 

Mais je ne comprends pas le
a.info
a.info span
a.info:hover
a.info:hover span

J'ai un peu étudié les héritages ces jours ci avec mon notaire: http://www.alsacreations.com/tuto/lire/545-Comprendre-l-heritage-et-la-parente-des-styles-CSS.html
Mais c'est pas encore tout clair.

MErci pour vos explications!
Modifié par abeille (18 Mar 2016 - 15:40)
Au risque de ne pas avoir saisi la portée de la question...

abeille a écrit :
Mais je ne comprends pas le
a.info
a.info span
a.info:hover
a.info:hover span


traduisible par :
Les liens de la class info
les span contenus dans les liens de la class info (enfants directs ou indirects)
les liens de la class info survollés
les span contenus dans les liens survollés de la class info (enfants directs ou indirects)

Notion d'enfant direct ou indirect:
<div>
 <span>
 </span>
</div>
Ici Span est enfant direct de Div (ou Div est parent direct de Span)


<div>
 <span>
   <a>
   </a>
 </span>
</div>
Ici span est enfant direct de div,
<a> est enfant indirect de Div mais aussi enfant direct de Span
Modifié par Greg_Lumiere (18 Mar 2016 - 15:45)
Merci Greg, tu m'éclaires (encore!)
Je comprends mieux maintenant cette affaire d'héritage. Faut que j'apprenne un peu plus comment ça fonctionne tout ça.

Merci,.
Modifié par abeille (18 Mar 2016 - 23:03)