Créer un nouveau fichier activite16.html, puis ajouter dans la balise « body » :
<div>
<p class="p1">Lorem, ipsum.p1</p>
<p class="p2">Lorem, ipsum.p2</p>
<p class="p3">Lorem, ipsum.p3</p>
<p class="p4">Lorem, ipsum.p4</p>
<p class="p5">Lorem, ipsum.p5</p>
<p class="p6">Lorem, ipsum.p6</p>
<p class="p7">Lorem, ipsum.p7</p>
<p class="p8">Lorem, ipsum.p8</p>
</div>Dans un fichier css externe (activite16.css) ajouter le code suivant :
/*transition: transition-delay | transition-duration | transition-property*/
/*styler touls les paragraphes avec une couleur arrière plan bleu et largeur 200points */
p {
background-color: antiquewhite;
width: 200px;
}
/*lorsque la souris survole un paragraphe, sa couleur d'arrière plan change en rouge clair */
p:hover {
background-color: rgb(250, 201, 212);
}
/*lorsque la souris survole le paragraphe 1, sa couleur d'arrière plan change en cornflowerblue */
.p1:hover {
background-color: cornflowerblue;
}
/*lorsque la souris survole le paragraphe 2, il prend une bordure épaisse jaune */
.p2:hover {
border: 3px solid yellow;
}
/*lorsque la souris survole le paragraphe 3, ce dernier prend un arrière plan vert, taille du texte 20 point, couleur de texte blanche, bordure épaisse rouge */
.p3:hover {
background-color: green;
font-size: 20px;
color: white;
border: 4px solid red;
}
/*lorsque la souris survole le paragraphe 4, ce dernier prend un arrière plan vert, taille du texte 20 point, couleur de texte blanche, bordure épaisse rouge, coin arrondi de 5px, tous les effets de transition seront exécuté après 7s durant 2s*/
.p4:hover {
background-color: green;
font-size: 20px;
color: white;
border: 4px solid red;
border-radius: 5px;
transition-duration: 2s;
transition-delay: 7s;
}
/* lorsque la souris survole le paragraphe 5, les propriétés : arrière plan vert, couleur de texte blanche, bordure épaisse rouge, coin arrondi de 5px seront exécuté après 0s et une taille du texte 20 points prend effet après 7s durant 2s */
.p5:hover {
background-color: green;
font-size: 20px;
color: white;
border: 4px solid red;
border-radius: 5px;
transition-duration: 2s;
transition-delay: 7s;
transition-property: font-size;
}
/* lorsque la souris survole le paragraphe 6, les propriétés : arrière plan vert, bordure épaisse rouge, taille du texte 20 points seront exécuté dans 0s et la propriété couleur de texte blanche sera exécuté après 10s et la propriété coin arrondi de 5px sera exécuté après 15s */
.p6:hover {
background-color: green;
font-size: 20px;
color: white;
border: 4px solid red;
border-radius: 15px;
transition: color 10s, border-radius 15s;
}
Tester le survol de la souris sur chaque paragraphe, patienter et voir de résultat?
| Syntaxe de la propriété | description |
| transition-property:color; | Indique à quelle propriété on fournit une transition. Par défaut all, c’est-à-dire toutes les propriétés. |
| transition-duration: durée s; | Définit la durée totale du temps de la transition. Par défaut la valeur est 0, il n’y a aucune transition. |
| transition-delay: durée s; | Indique à quel moment démarre la transition (par rapport à l’évènement qui la déclenche). |
| transition-property, transition-duration, transition-timing-function, transition-delay | Les quatre propriétés peuvent être réduites à une seule. |
