• Survol autre élément

    La réalisation d'un article me fait revenir sur le survol d'un élément pour en animer un autre, en CSS.

    Le programme de nos PC impose de lui indiquer d'abord quel élément survoler et ensuite quel élément à animer; ceci signifie que le premier élément survolé pourra animer le second mais que le second survolé ne pourra animer le premier, écrit avant lui.

    Nous trouvons cette situation dans les montages: tant que le survol d'un élément l'anime directement, pas de souci: on place chaque élément en indépendant et son animation ne concerne que lui.

    Si le survol d'un élément doit animer d'autres éléments placés devant lui, il faut ajouter en premier, des éléments invisibles qui pourront animer ceux qui les suivent.

    Ceci fait multiplier les lignes de code mais rien d'insurmontable car très répétitif.

    Voilà ce principe utilisé dans l'article: "Pas flex 2".

     

     

     

     

     

     

     

     

     

     

     


    <div style="width: 60vw; height: 33.75vw; margin: 2vh auto;">
    <p id="act1" class="act">&nbsp;</p>
    <p id="act2" class="act">&nbsp;</p>
    <p id="act3" class="act">&nbsp;</p>
    <p id="act4" class="act">&nbsp;</p>
    <p id="act5" class="act">&nbsp;</p>
    <p id="act1a" class="acta">&nbsp;</p>
    <p id="act2a" class="acta">&nbsp;</p>
    <p id="act3a" class="acta">&nbsp;</p>
    <p id="act4a" class="acta">&nbsp;</p>
    <p id="act5a" class="acta">&nbsp;</p>
    </div>
    <style><!--
    .act{position:absolute; z-index:5; width:12vw; height:33.75vw;}
    #act1{transform:translate(0vw,0vw);}
    #act2{transform:translate(12vw,0vw);}
    #act3{transform:translate(24vw,0vw);}
    #act4{transform:translate(36vw,0vw);}
    #act5{transform:translate(48vw,0vw);}
    .acta{position:absolute; z-index:1; box-sizing:border-box; width:12vw; height:33.75vw; border:0.4vh solid white; transition:all 1s linear;}
    #act1a{background:url('http://ekladata.com/sHTkVRugPbxOsTwTM53gk2VDkqo.jpg'); background-size:60vw 33.75vw; background-position:0vw 0vw; transform:translate(0vw,0vw);}
    #act2a{background:url('http://ekladata.com/lkUrPr-TyiYIqemzFfGyUK8j4wg.jpg'); background-size:60vw 33.75vw; background-position:-12vw 0vw; transform:translate(12vw,0vw);}
    #act3a{background:url('http://ekladata.com/rgK-slJel4r8FCnEysUd_CJNaJU.jpg'); background-size:60vw 33.75vw; background-position:-24vw 0vw; transform:translate(24vw,0vw);}
    #act4a{background:url('http://ekladata.com/m2rQ3HJhRudbKVqBvxqHW6saZi4.jpg'); background-size:60vw 33.75vw; background-position:-36vw 0vw; transform:translate(36vw,0vw);}
    #act5a{background:url('http://ekladata.com/_Yc2G8vC5kUoguQRmyMx8Y0RQnE.jpg'); background-size:60vw 33.75vw; background-position:-48vw 0vw; transform:translate(48vw,0vw);}
    #act1:hover ~ #act1a{z-index:3; width:60vw; background-position:0vw 0vw; transform:translate(0vw,0vw);}
    #act2:hover ~ #act2a{z-index:3; width:60vw; background-position:0vw 0vw; transform:translate(0vw,0vw);}
    #act3:hover ~ #act3a{z-index:3; width:60vw; background-position:0vw 0vw; transform:translate(0vw,0vw);}
    #act4:hover ~ #act4a{z-index:3; width:60vw; background-position:0vw 0vw; transform:translate(0vw,0vw);}
    #act5:hover ~ #act5a{z-index:3; width:60vw; background-position:0vw 0vw; transform:translate(0vw,0vw);}
    #act1:hover ~ #act2a,#act1:hover ~ #act3a,#act1:hover ~ #act4a,#act1:hover ~ #act5a{width:0; transform:translate(60vw,0vw);}
    #act2:hover ~ #act1a{width:0; transform:translate(0vw,0vw);}
    #act2:hover ~ #act3a,#act2:hover ~ #act4a,#act2:hover ~ #act5a{width:0; transform:translate(60vw,0vw);}
    #act3:hover ~ #act1a,#act3:hover ~ #act2a{width:0; transform:translate(0vw,0vw);}
    #act3:hover ~ #act4a,#act3:hover ~ #act5a{width:0; transform:translate(60vw,0vw);}
    #act4:hover ~ #act1a,#act4:hover ~ #act2a,#act4:hover ~ #act3a{width:0; transform:translate(0vw,0vw);}
    #act4:hover ~ #act5a{width:0; transform:translate(60vw,0vw);}
    #act5:hover ~ #act1a,#act5:hover ~ #act2a,#act5:hover ~ #act3a,#act5:hover ~ #act4a{width:0; transform:translate(0vw,0vw);}
    --></style>