Le hover ne marche qu'à moitier
Réduire
X
-
Lomart merci pour la solution. Je vais décortiquer ça car il y a beaucoup plus de code. Merci aussi a toi Helloo.
-
Envoyé par Helloo Voir le message
Oui ça fonctionne bien, mais il veut de droite à la gauche comme j'ai compris.
Au hover le soulignement doit disparaître de la gauche vers la droiteCode:a::before, a::after {right: 0;} // ou left a::before {transform-origin: left;} a::after {transform-origin: left;}
- "J'aime" 1
Laisser un commentaire:
-
Envoyé par lomart Voir le message
Laisser un commentaire:
-
- "J'aime" 2
Laisser un commentaire:
-
Je pensais juste à séparé les 2 partie
.lien-effet-10 a + .lien-effet-11 a:hover
Mais c'était juste une idée.
Laisser un commentaire:
-
Le hover ne marche qu'à moitier
Salut
Je me fais des tests pour des effets sur les liens. Il y en a un je ne sais pas pourquoi il ne marche qu'à moitié.
Au hover le soulignement doit disparaître de la gauche vers la droite et à la place un autre soulignement doit le remplacer en apparaissant de la gauche vers la droite aussi. Et quand on enlève le curseur le second soulignement disparaît toujours de la gauche vers la droite et le premier soulignement reprend sa place de la gauche vers la droite.
La disparition du premier soulignement marche, mais pas l'apparition du second (voir sur jsfiddle.net).
Le CSS :
Code:.lien-effet-10 a { text-decoration:none; background: linear-gradient(70deg, rgba(0,0,0) 100%, rgba(255,0,0) 100%); background-position: bottom left, bottom left; background-size: 100% 14%, 0 14%; background-repeat: no-repeat, no-repeat; transition-duration: 1s; transition-property: background-size; } .lien-effet-10 a:hover { text-decoration:none; background: linear-gradient(180deg, rgba(0,0,0) 100%, rgba(255,0,0) 100%); background-position: bottom right, bottom left; background-size: 0 14%, 100% 14%; background-repeat: no-repeat, no-repeat; transition-duration: 1s; transition-property: background-size; }
Tags: Aucun
Annonce
Réduire
Aucune annonce pour le moment.
Laisser un commentaire: