Tuto de Kayl n°7 - Le hover

Bon, comme promis, je vais faire le tuto 7 sur… le hover
Déjà, qu'est-ce que c'est ? Hover, c'est l'effet au passage de la souris. Donc, qu'est-ce qu'on peut faire ? Bah à peu près tout. Changer un texte ou un background de couleur, la taille, voire la police d'un texte. Et changer l'opacité, pour avoir une image et quand on passe, on la voit plus

Déjà pour commencer, on peut pas mettre les attributs en hover, (ni en after) dans une div comme ça. Fin faut la mettre dans une balise spécifique, et je vais tout vous expliquer le fonctionnement de ce CSS

Code:

<div style="width: 300px; background: black; padding: 10px; color: white;">Texte</div>

Ceci peut être remplacé, d'une manière simple. On peut donner un nom dans une div class, et mettre tout ce qui est CSS dans une balise style. Ouloulou c'est pas si compliqué /paf/

Code:

<style>.nom-badass{width: 300px; background: black; padding: 10px; color: white;}</style>
<div class="nom-badass">Texte</div>

Ce qui donne… la même chose Mais ça paraît tout de suite plus long et plus compliqué avec tous ces trucs Le truc c'est que pour le hover, y a pas le choix Donc, je vais déjà expliquer tout ça.

Code:

<div class="nom-badass">Texte</div>

Le div class, c'est un peu comme le style, mais à l'intérieur on ne met qu'un seul nom. Celui qu'on veut, mais il faut faire attention, parce que si dans la page l'un des éléments a le même nom, ça fera tout planter. Donc choisissez des noms pour vous repérer, par exemple, "fiche-tel-perso".

Code:

<style></style>

Cette balise remplace le style="". Donc à l'intérieur, on trouvera le CSS d'une manière un peu particulière.
Déjà, à l'intérieur, il faudra mettre un point (oui oui juste un point normal), suivi du nom choisi pour votre div. Ça permettra de les relier. (Le texte dans la div class prendra le CSS qu'on indiquera dans la balise style)
Et pour finir, on placera le CSS de la div dans des crochets { }, de cette manière :

Code:

<style>.nom-badass{width: 300px; background: black; padding: 10px; color: white;}</style>

Voilà voilà Ce sera tout pour la partie une :D C'est pas si compliqué, faut juste retenir :
Balise style avec à l'intérieur un point, puis le nom spécial qu'on donne nous-mêmes, et dans les crochets le CSS qu'on veut donner.
Une balise div class, avec le nom spécial, et c'est tout, ça relie tout seul comme un grand °^°

Ensuite, on va donc voir la base du hover, que j'approfondirai ailleurs
Donc ça, comment ça marche ? Dans la balise style, on va reprendre ce qu'on avait au-dessus (assez simple), je change juste le nom pour que ça bousille pas ce qui est dessus Et je remplace le nom par fiche-tuto.

Code:

<style>.fiche-tuto{width: 300px; background: black; padding: 10px; color: white;}</style>
<div class="fiche-tuto">Texte</div>

Imaginons qu'on veuille changer le background en blanc, et l'écriture en noir (pour que ça fasse l'inverse de ce qu'on a) :D
Pour créer un hover, voici comment on fait :

Code:

<style>.fiche-tuto:hover{ICI}</style>

Dans la balise style, on va remettre le même nom de notre div qui change .fiche-tuto pour l'exemple. Puis on met deux points : et hover, et nos crochets { }. Et dans les crochets, on mettra uniquement le CSS qui change (ici, on mettra donc… oui, background: white; color: black; )

Code:

<style>.fiche-tuto{width: 300px; background: black; padding: 10px; color: white;}.fiche-tuto:hover{background: white; color: black;}</style>
<div class="fiche-tuto">Texte</div>

Et voilà on peut passer la souris :D Juste un petit truc, faut vraiment pas mettre de sauts à la ligne dans la balise style Sinon ça marche pas

Ah et petite technique pour le temps de l'effet : l'info CSS
transition: all 2s;
On peut la rajouter avant le hover et dedans, elle correspond au temps de l'effet donc, vous pouvez changer 2s par le nombre de secondes, 0.5 ou 30 m'enfin d'habitude je mets plutôt vers les 1s

Code:

<style>.fiche-tuto{width: 300px; background: black; padding: 10px; color: white; transition: all 1s;}.fiche-tuto:hover{background: white; color: black; transition: all 1s;}</style>
<div class="fiche-tuto">Texte</div>

Fin de ce tuto plus compliqué, pour la prochaine fois, on va parler des images qui disparaissent
Hésitez pas à foutre des entraînements dessous, ou si y a des questions etc