Topo sur le hover 8D
*ont commence par ça parce que c'est le moins long /PAN/*Coucou Abso', donc je vais de te donner quelques méthodes avec les explications pour le hover c:
Pour commencer, un bref rappel (ça va te servir Orph', alors lit aussi 8D). Le hover, c'est le fait de créer des transition entre un point A et un point B au passage de la souris. En claire, tu passe ta souris, POUF il se passe un truc.
Exemple :
- Code:
-
.rondnoir {
margin:auto; /*pour centrer*/
transition: all 0.4s ease; /*La transition de fin*/
border-radius:50px 50px 50px 50px; /*les bords arrondis*/
width:100px; /*la largeur*/
height:100px; /*la hauteur*/
background:mediumpurple;/*la couleur de fond*/
}
.rondnoir:hover { /*Au survol*/
transition: all 0.4s ease;/*la transition de début*/
background:indigo;/*la couleur de fond*/
}
- Code:
-
<div class="rondnoir"></div>
Donc vous l'aurez remarqué, je n'utilise pas la manière classique du :
- Code:
-
.durée {-o-transition-duration: 2s;
webkit-transition-duration: 2s;
-moz-transition-duration: 2s;
transition-duration: 2s;}
.rondnoir {
margin:auto; /*pour centrer*/
border-radius:50px 50px 50px 50px; /*les bords arrondis*/
width:100px; /*la largeur*/
height:100px; /*la hauteur*/
background:mediumpurple;/*la couleur de fond*/
}
.rondnoir:hover { /*Au survol*/
background:indigo;/*la couleur de fond*/
}
- Code:
-
<div class="durée rondnoir"></div>
Je sais qu'il y a plein de trucs comme ça, mais je ne préfère pas m'aventurer plus loin, c'est déjà bien assez compliqué comme ça.
Pour revenir à cette propriété :
transition: all 0.4s ease;
Le 0.4s correspond au temps, le reste, on s'en fout (
#laprofquinesaitrien).
Généralement, on ne met pas les même valeurs pour l'allée et le retour parce que c'est plus stylé
Après, on recherche généralement plus d'effet soi-même sur internet,
parce qu'on est jamais contente de ce qu'on veut.
Donc je vais donner deux trois manière de faire un hover sympa c:
Déjà, commençons par une manière que j'aime beaucoup utiliser (elle est présente sur la PA Baby Metal que j'ai laisser en LS
ici ^-^
Donc on fait un rond :
- Code:
-
.premierrond {
margin:auto;
border-radius:50px 50px 50px 50px;
width:100px;
height:100px;
background:pink;
*/
}
- Code:
-
<div class="premierrond"></div>
Puis un deuxième rond :
- Code:
-
.premierrond {
margin:auto;
border-radius:50px 50px 50px 50px;
width:100px;
height:100px;
background:pink;
}
.deuxiemerond {
margin:auto;
border-radius:50px 50px 50px 50px;
width:100px;
height:100px;
background:green;
}
- Code:
-
<div class="premierrond"></div>
<div class="deuxiemerond"></div>
On utiliser un margin pour remonter le rond vert de sorte à ce qu'il se superpose sur le rond rose clair.
- Code:
-
.premierrond {
margin:auto;
border-radius:50px 50px 50px 50px;
width:100px;
height:100px;
background:pink;
}
.deuxiemerond {
margin:auto;
border-radius:50px 50px 50px 50px;
width:100px;
height:100px;
background:green;
margin-top:-118px;
}
Et maintenant vient la transition ! On va mettre le deuxieme rond a opacité 1 et au hover, le placer à opacité 0 de sorte à ce qu'il laisse le rond rose visible c:
- Code:
-
.premierrond {
margin:auto;
border-radius:50px 50px 50px 50px;
width:100px;
height:100px;
background:pink;
}
.deuxiemerond {
transition: all 0.4s ease;
opacity:1;
margin:auto;
border-radius:50px 50px 50px 50px;
width:100px;
height:100px;
background:green;
margin-top:-118px;
}
.deuxiemerond:hover {
transition: all 0.4s ease;
opacity:0;
}
Je sais ce que vous allez dire. C'est plus long et moins simple que la méthode qui est exposé au tout début du cours certes. En fait, cette méthode est plus utilisé pour l'apparition, disparition de textes/images. On met le premier rond avec une image ou une couleur, et au survol apparaît une autre couleur (dans le cas d'une image) ou un texte. Pour que le texte soit bien positionné en dessous du rond vert, on rajoute un z-index aux deux ronds. C'est ce qui permet une bonne superposition. Par exemple, un z-index de 999 sera toujours position au dessus d'un z-index 998
Comme ceci :
Lala
- Code:
-
.premierrond {
margin:auto;
border-radius:50px 50px 50px 50px;
width:100px;
height:100px;
background:pink;
position:relative;
z-index:1;
}
.deuxiemerond {
transition: all 0.4s ease;
opacity:1;
margin:auto;
border-radius:50px 50px 50px 50px;
width:100px;
height:100px;
background:green;
margin-top:-118px;
position:relative;
z-index:2;
}
.deuxiemerond:hover {
transition: all 0.4s ease;
opacity:0;
}
Je pense que je posterais à la suite d'autre méthode pour le hover. Mais ici, j'ai expliqué le plus simple, j'espère que j'ai été assez compréhensible >w<
Je commence ton cours demain Orph', désolé j'ai un léger contre-temps aujourd'hui qui fait que je n'aurais pas mon ordi à dispo et sur portable, c'est un peu galère.
C'était les hover