Le hover ne marche qu'à moitier

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • schtroumph
    a répondu
    Lomart merci pour la solution. Je vais décortiquer ça car il y a beaucoup plus de code. Merci aussi a toi Helloo.

    Laisser un commentaire:


  • Helloo
    a répondu
    Effectivement, il me faut changer d'opticien
    Dernière édition par Helloo à 17/06/2022, 10h30

    Laisser un commentaire:


  • lomart
    a répondu
    Envoyé par Helloo Voir le message

    Oui ça fonctionne bien, mais il veut de droite à la gauche comme j'ai compris.
    Moi, j'ai lu :
    Au hover le soulignement doit disparaître de la gauche vers la droite
    mais ce n'est pas grave, il suffit de jouer sur
    Code:
    a::before, a::after {right: 0;} // ou left
    a::before {transform-origin: left;}
    a::after {transform-origin: left;}

    Laisser un commentaire:


  • Helloo
    a répondu
    Envoyé par lomart Voir le message
    Bonjour,

    Je verrai plus quelque chose comme cela : https://jsfiddle.net/69tw5ay4/
    Oui ça fonctionne bien, mais il veut de droite à la gauche comme j'ai compris.

    Laisser un commentaire:


  • lomart
    a répondu
    Bonjour,

    Je verrai plus quelque chose comme cela : https://jsfiddle.net/69tw5ay4/

    Laisser un commentaire:


  • Helloo
    a répondu
    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:


  • schtroumph
    a répondu
    C'est a dire ? une pour chaque couleur ?

    Laisser un commentaire:


  • Helloo
    a répondu
    Bonjour,

    Je ne suis pas certain, mais peut-être avec 2 class séparée ?
    Dernière édition par Helloo à 16/06/2022, 20h12

    Laisser un commentaire:


  • schtroumph
    a crée un sujet [RÉGLÉ] Le hover ne marche qu'à moitier

    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;
    }

Annonce

Réduire
Aucune annonce pour le moment.

Partenaire de l'association

Réduire

Hébergeur Web PlanetHoster
Travaille ...
X