28172 sujets

CSS et mise en forme, CSS3

Bonjour,
j'ai une animation qui fonctionne parfaitement avec la pseudo classe ":hover", mais pas avec ":checked".
voici mon code html :
<div class="entrees">
                            <input type="checkbox" id="coche-palette-gout">
                            <label class="vide" for="coche-palette-gout">
                                <div class="infos1">
                                    <div class="entrees__nom">
                                        <h4>Fricassée d'escargot</h4>
                                    </div>
                                    <div class="entrees__compo-prix">
                                        <p>Au piment d'Espelette</p>
                                        <p>25€</p>
                                    </div>
                                </div>
                                <div class="coche">
                                    <i class="fas fa-check-circle"></i>
                                </div>
                            </label>
                        </div>

et voici mon code scss :
 .coche{
        display: none;
        margin-left: -4em;
        background-color: $couleur-tertiaire;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
        margin-bottom: 1em;
        width: 4em;
        height: 4.5em;
        i{
            margin: auto;
            color: white;
            font-size: 2em;
        }
    }
    .entrees{
        display: flex;
        [id="coche-palette-gout"]{
            display: inherit;
        }
        &:checked +label{
            .coche{
                display: inherit;
                transform-origin: right;
                animation: coche 500ms forwards;
                i{
                    animation: coche-rotation 500ms forwards;
                }
            }
            .entrees__compo-prix{
                animation: reduc-div 500ms forwards;
            }
        }
    }

le but est d'avoir ce résultat :
upload/1645005526-84105-anim-coche-hover.png
quelqu'un peut-il me dire où se trouve mon erreur s'il vous plaît ?
Modérateur
Coucou,

La div .entrées ne peut pas avoir d'état :checked, ce n'est pas une checkbox.
Meilleure solution
Coucou Laurent !
Merciiii !!!!!
J'avais effectivement une accolade en trop !! Du coup l'état :checked était positionné sur .entrées au lieu de l'input... Smiley rolleyes
Encore merci et bonne journée !