• Au clic

    Beaucoup d'entre nous préfèrent les montages au survol plutôt qu'au clic.

    Survol:

    Avantage: on place son curseur sur l'élément à animer et on le sort de cet élément pour revenir en position de départ.

    Inconvénient: si plusieurs éléments sont proches, les éléments centraux sont impossibles à survoler sans en survoler d'autres: instabilité.

    Clic:

    Avantage: on clique sur l'élément à animer et rien d'autre ne bouge en déplaçant son curseur: stabilité.

    Inconvénient: on clique une seconde fois pour revenir en position de départ: dans la plupart du temps, les montages proposent une croix, dans l'angle haut/droit à cliquer pour revenir en position de départ.

    On peut contourner ce déplacement pour aller cliquer sur la croix en transformant cette croix en bouton invisible qui recouvre l'ensemble de l'élément; ainsi, un second clic n'importe où, le ramène en position de départ. Cela me semble aussi simple que le survol !

     

     


    <div style="width: 32vw; height: 18vw; border: 0.2vh solid white; margin: 0 auto;"><input id="s1" class="s" type="text" value="clic1" /><input id="s2" class="s" type="text" value="clic2" /><input id="s3" class="s" type="text" value="clic3" /><input id="s4" class="s" type="text" value="clic4" />
    <p id="q1">&nbsp;</p>
    </div>
    <style><!--
    .s{position:absolute; z-index:2; width:16vw; height:9vw; border:none; font-size:2vw; text-align:center; line-height:9vw; transition:all 1s linear;}
    #s1{transform:translate(0vw,0vw); background:yellow;}
    #s2{transform:translate(16vw,0vw); background:green;}
    #s3{transform:translate(0vw,9vw); background:lime;}
    #s4{transform:translate(16vw,9vw); background:aqua;}
    #q1{position:absolute; z-index:1; width:32vw; height:18vw;}
    #s1:focus,#s2:focus,#s3:focus,#s4:focus{z-index:10; width:32vw; height:18vw; transform:translate(0vw,0vw);}
    #s1:focus ~ #q1,#s2:focus ~ #q1,#s3:focus ~ #q1,#s4:focus ~ #q1{z-index:20;}
    --></style>


    Le nombre d'éléments, leur forme, leur animation et leur positionnement sont à votre convenance.

    Le bouton invisible (q1) (z-index:1;) est placé en dessous des éléments (z-index:2;) de façon à laisser ceux-ci actifs.

    En cliquant sur un élément, on lance son animation et on fait passer le bouton invisible en premier plan (z-index:20;}

    En cliquant sur ce bouton, on annule le clic précédent et l'élément retrouve ses paramètres de départ: fonctionnement par défaut: pas de ligne à écrire.

    Cette solution est plus stable que le survol et simple à écrire.