[Résolu] Animation au survol d'un élément parent fonctionne partiellem

Bonjour à tous !

Je viens vers vous car je bloque sur un petit problème de CSS. Ce sera sûrement un détails pour vous mais personnellement, là, je sèche...

Je vous passe les détails mais en gros j'ai une div (appelons-là "div1") qui contient 2 div superposées (appelons-les "div2" et "div3") contenant chacune un coeur (police awesome).
A l'état initial, la div2 est visible et la div3 ne l'est pas. Je voudrais qu'au survol de la div1 la div2 devienne invisible et la div3 devienne visible avec un effet de grossissement.

J'ai réussi à mettre tout ça en place mais par contre impossible d'appliquer l'effet de transition.

Voici le code html :

<div class="vignettes__coeurs">
                                    <div class="coeur coeur--vide">
                                        <i class="far fa-heart"></i>
                                    </div>
                                    <div class="coeur coeur--plein">
                                        <i class="fas fa-heart"></i>
                                    </div>
                                </div>

Voici le code scss :

.vignettes {
    &__coeurs {
        width: 30px;
        height: 30px;
        position: relative;
        &:hover {
            & .coeur--vide {
                display: none;
            }
            & .coeur--plein {
                display: inherit;
                transform: scale(1);
            }
        }
    }
}

.coeur {
    font-size: 1.4rem;
    position: absolute;
    left: 12.5%;
    top: 0;
    &--vide {
        color: $grislogo;
    }
    &--plein {
        background: linear-gradient(27deg, $secondaire 0%, $primaire 100%);
        background-clip: text;
        color: transparent;
        display: none;
        transform: scale(0.3);
        transition: transform 2000ms; // C'est cette ligne qui semble ne pas être interprétée.
    }
}

Voilà je pense avoir été exhaustif. Vous voyez ce qui cloche ?
En tout cas je vous remercie par avance !
Modifié par Vahia (28 May 2021 - 18:34)

Salut!

Je pense qu'il faut que tu sortes le hover de l'imbrication et que tu rajoute le nom de la classe, dans ce genre là:

&__coeurs{

    // Tes valeurs pour la première div

    &--vide{
    // Tes valeurs pour le coeur vide
     }
    &--vide:hover{
    // Tes valeurs pour le hover
    }
  }

Modifié par Stoneteckel (28 May 2021 - 18:41)

Oui mais là le souci c'est que le hover va s'appliquer au survol de la div du coeur et c'est ce que je veux éviter car dans l'animation je mets un scale(0.3). Le coeur devient tout petit et si le pointeur de la souris n'est pas placé pile au centre du coeur l'animation s'arrête. En mettant le hover sur l'élément parent j'avais l'avantage d'avoir une div dont la taille reste constante.

Et si tu fais

&__coeurs{
  // Tes valeurs
}

&__coeurs:hover{
  &--vide{
   // Tes valeurs
 }
}

Ça fonctionne pas non plus?

Je te remercie pour tes réponses.
Le souci c'est que "--vide" n'hérite pas de "coeurs" mais de "coeur" donc ça marche pas.

Ce que je ne comprends pas c'est la fonction hover fonctionne puisque lorsque je survole la div1 la div3 réagit. C'est juste la transition qui ne fonctionne pas...

Tu es au top !!! Mille mercis !

L'astuce c'est que la transition ne fonctionne pas avec le changement de display (ce que je ne savais pas et que tu viens de m'apprendre). Du coup en remplaçant "display: none;" par "opacity: 0;" ou "visibility: hidden;" ça fonctionne parfaitement !

Encore une fois merci pour ton temps et ton aide !

Avec plaisir