Le hover ne marche qu'à moitier

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

  • [RÉGLÉ] 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;
    }
    Sur mon site www.sorgin-informatique.com : tutos sur Joomla! et ces composants et sur différents logiciels et services libres (Firefox, KeePass, uMap, Framadate, etc).

  • #2
    Bonjour,

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

    Commentaire


    • #3
      C'est a dire ? une pour chaque couleur ?
      Sur mon site www.sorgin-informatique.com : tutos sur Joomla! et ces composants et sur différents logiciels et services libres (Firefox, KeePass, uMap, Framadate, etc).

      Commentaire


      • #4
        Je pensais juste à séparé les 2 partie
        .lien-effet-10 a + .lien-effet-11 a:hover

        Mais c'était juste une idée.

        Commentaire


        • #5
          Bonjour,

          Je verrai plus quelque chose comme cela : https://jsfiddle.net/69tw5ay4/
          schtroumph et Helloo aiment ceci.
          UP, le plugin universel à découvrir sur https//up.lomart.fr
          bgMax
          , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

          Commentaire


          • #6
            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.

            Commentaire


            • #7
              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;}
              Helloo aime ceci.
              UP, le plugin universel à découvrir sur https//up.lomart.fr
              bgMax
              , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

              Commentaire


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

                Commentaire


                • #9
                  Lomart merci pour la solution. Je vais décortiquer ça car il y a beaucoup plus de code. Merci aussi a toi Helloo.
                  Sur mon site www.sorgin-informatique.com : tutos sur Joomla! et ces composants et sur différents logiciels et services libres (Firefox, KeePass, uMap, Framadate, etc).

                  Commentaire

                  Annonce

                  Réduire
                  Aucune annonce pour le moment.

                  Partenaire de l'association

                  Réduire

                  Hébergeur Web PlanetHoster
                  Travaille ...
                  X