En Css, il existe de très nombreux pseudo-éléments. Dans les exercices précédents, les pseudo-éléments :first-of-type, :last-of-type et :nth-of-type ont permis d'identifier des éléments en fonction de leur «numéro» dans un conteneur. Le pseudo-élément :hover permet, quant à lui, de modifier l'affichage de l'élément ciblé au passage de la souris.

Bac à sable : Survol d'un élément

Le formulaire permet de définir le style au survol du paragraphe.

Ci-contre, on peut choisir quels seront l'image d'arrière-plan de cette boîte ainsi que l'apparence du texte, l'épaisseur et la couleur de la bordure lors du survol de la boîte par la souris.

Code Css :

p:hover {                           /* Mise en forme lors du survol */
	background-image: url();       /* Chemin relatif */
	border: 1px solid #000000;      /* Bordure */
	font-weight: normal;            /* Style du texte */
	text-decoration: none;          /* Decoration du texte */
	}

Les styles Css permettent de mettre des effets «whaou» avec peu de lignes. Modifier le code ci-dessous afin d'obtenir le même effet que le survol de l'image ci-contre.
Le chemin relatif de l'image est css_images/rire.jpg.

Une piste ?
Affichage à obtenir ?
Une solution ?

Dans les cas suivants, X doit être remplacé par un nombre.

La déclaration de style transform: rotate(Xdeg); permet d'afficher un conteneur en lui faisant subir une rotation de X degrés autour de son centre.
La déclaration de style transition: Xs; applique les modifications de style en X secondes au lieu de les appliquer instantanément.

J'apprends, je suis content ! stromae

Modifier le code Css suivant afin d'obtenir l'affichage ci-contre. Passer la souris sur ce paragraphe pour comprendre l'effet réalisé.
Le chemin relatif de l'image est css_images/rire.jpg.

Une piste ?
Affichage à obtenir ?
Une solution ?

La déclaration de style display: none; permet de ne pas afficher un conteneur à l'écran, display: block; «transforme» l'élément en contenur de type bloc.
Pour affecter un élément inclut dans un conteneur il suffit de déclarer les sélecteurs en les séparant par un espace. Par exemple, p strong {...} affecte uniquement la mise en forme des éléments strong contenus dans des paragraphes p (et pas ceux inclus dans des listes ou autre...).

Dans le code Html ci-dessous, les mots «Logo Python» et le logo Python apparaissent. Définir le Css pour que :

Seuls les mots «Logo Python» apparaissent, dans les couleurs du logo (#ffc331 et #387eb8).
Lorsqu'on survole le paragraphe, le texte «Logo Python» disparaît et est remplacé par le logo.
Le logo apparaîtra entouré d'un cercle aux couleurs du logo.

Une piste ?
Affichage à obtenir ?
Une solution ?

Utiliser les valeurs none et block de la propriété display pour faire apparaître/disparaître une image (ou tout autre élément).

La couleur est parfois utilisée pour aider le lecteur. Notamment dans la lecture d'un tableau en alternant les couleurs des lignes.
Dans le tableau ci-dessous, alterner la couleur des lignes. La couleur d'une ligne sera également modifiée lors de son survol.

Ajouter ensuite, dans les cellules contenant les noms des acteurs, des photographies de ces acteurs qui n'apparaîtront qu'au survol de la cellule.
Vous pouvez charger ces images sur le web ou avec src="css_images/prenom.jpeg".

Une piste ?
Affichage à obtenir ?
Une solution ?

Pour alterner une propriété sur des éléments de même nature, on utilisera le pseudo-élément :nth-of-type().

<table>
	<caption>
		Tableau avec alternances de couleurs
	</caption>
	<thead>
		<tr><th> film </th>
			<th> Acteur </th></tr>
	</thead>
	<tbody>
		<tr><td> Star Wars </td>
			<td> Harrison Ford <img src="css_images/harrison.jpeg" width="50" alt="ford"> </td></tr>
		<tr><td> Blade Runner </td>
			<td> Harrison Ford <img src="css_images/harrison.jpeg" width="50" alt="ford"> </td></tr>
		<tr><td> Matrix </td>
			<td> Keanu Reeves <img src="css_images/keanu.jpeg" width="50" alt="reeves"> </td></tr>
		<tr><td> Alien </td>
			<td> Sigourney Weaver <img src="css_images/sigourney.jpeg" width="50" alt="weaver"> </td></tr>
		<tr><td> Terminator </td>
			<td> Arnold Schwarzenegger <img src="css_images/arnold.jpeg" width="50" alt="musclor"> </td></tr>
		<tr><td> Bienvenue à Gattaca </td>
			<td> Uma Thurman <img src="css_images/uma.jpeg" width="50" alt="Thurman"> </td></tr>
		<tr><td> Total Recall </td>
			<td> Arnold Schwarzenegger <img src="css_images/arnold.jpeg" width="50" alt="musclor"> </td></tr>
	</tbody>
</table>

/* Partie css */
table{							/* ajout d'un cadre sur le tableau */
	border : 1px solid black;
	}
        
caption{						/* ajout d'un cadre sur le caption */
	border : 1px solid black;
	border-radius : 5px 5px 0 0;
	}
        
th{
	font-weight: bold;			/* fonte grasse sur cellule d'entête */
	text-align : center;		/* texte centré */
	}

th, td {			
	border : 1px solid black;	/* bordure sur les cellules */
	padding: 0.3em;				/* un peu de gras interne pour décoller les bordures du texte */
	}
	
tbody>tr:nth-of-type(2n+1){		/* alternance de couleurs sur les lignes sauf la ligne d'entête */
	background-color: rgb(255,150,150);
	}

tbody>tr:hover{					/* couleur lors du survol d'une ligne */
	color: rgb(255,150,150);
	background-color : black;
	}

thead>tr{						/* couleur de la ligne d'entête */
	background-color: rgb(150,150,255);
	}

img{							/* les images ne sont pas affichées a priori */
	display: none;
	}

td:hover img{					/* apparition de l'image au survol de la cellule : */
	display: block;
	}

Cet exercice est plus difficile, il donne un bon point de départ pour concevoir un menu. La liste ci-dessous est destinée à être un menu avec un sous-niveau.
Apporter les modifications nécessaires pour que le rendu soit approximativement celui des images ci-dessous :

Affichage par défaut :
Affichage lors du survol de "Menu 1" :

Une piste ?
Affichage à obtenir ?
Une solution ?

Il est nécessaire de pouvoir positionner des blocs enfants par rapport à leur parent. Ce site comporte une page d'entraînement sur les positionnements ici. La documentation officielle se trouve ici.