純CSS中圖像滑塊下的進度條

Question

我想在純CSS的滑塊下制作一個進度條。 我的滑塊中有兩個圖像，顯示第一個圖像時，條形必須為50％，顯示第二個圖像時，條形必須為100％。

但是我無法按預期顯示第二個圖像的條，切換到該條時該條不會調整大小（圖像滑塊工作正常）

你能幫助我嗎 ？

謝謝 ！ 奧黛麗

  #slider { position: relative; width: 100%; height: 400px; overflow: hidden; } #images_slider { position: absolute; top: 0; left: 0; margin: 0; padding: 0; width: 100%; height: 400px; } #images_slider li { display: flex; } #images_slider img { width: 100%; height: 450px; } #image_gars:target #image_fille { left: -150%; } #banniere #bouton_prev { position: absolute; left : 0; top: 42%; border : solid rgba(153,153,153,0.2) 0.1px; background-color: rgba(153,153,153,0.2); width: 25px; height: 50px; border-top-right-radius: 100px; border-bottom-right-radius: 100px; padding-top: 10px; padding-right: 5px; z-index: 6; } .fa.fa-chevron-left { position: absolute; left : 0; top: 45%; margin-left: 5px; color: white; z-index: 4; } #banniere #bouton_next { position: absolute; right: 0; top: 42%; border : solid rgba(153,153,153,0.2) 0.1px; background-color: rgba(153,153,153,0.2); border-top-left-radius: 100px; border-bottom-left-radius: 100px; padding-top: 10px; padding-left: 5px; width: 25px; height: 50px; z-index: 6; } .fa.fa-chevron-right { position: absolute; right: 0; top: 45%; color: white; margin-right: 5px; z-index: 4; } #ProgressBar { width: 100%; height: 5px; background-color: #A6A6A6; } #Progress { width: 50%; background-color: rgb(53,151,183); height: 100%; } #bouton_next:target #Progress { width: 100%; background-color: blue; height: 100%; } 

  <div id="banniere"> <div id="slider"> <ul id="images_slider"> <li><img src="images/slider/fillepeinture.jpg" alt="Petite fille avec les mains pleine de peinture" id="image_fille"/></li> <li><img src="images/slider/garconmegaphone.jpg" alt="Petit garçon avec un mégaphone" id="image_gars"/></li> </ul> </div> <a href="#image_fille" id="bouton_prev"></a> <a href="#image_gars" id="bouton_next"></a> <i class="fa fa-chevron-right" aria-hidden="true"></i> <i class="fa fa-chevron-left" aria-hidden="true"></i> </div> <div id="ProgressBar"> <div id="Progress"></div> </div> 

Answer 1

我對此又刺了一下。 當您指出重復的ID是一個問題時，您是對的。 通過錨可以定位的多個ID，事實證明它們都不是定位的。

我添加了一個包含div，該div現在帶有觸發ID，並重新處理了圖像和進度div的css以使用容器的目標狀態打開和關閉：

 #ProgressBar div { border: 1px solid black; color: red; font-style: italic; } #ProgressBar .image_fille { width: 50%; } #ProgressBar .image_gars { width: 100%; } .container .image_fille { display: block; } .container .image_gars { display: none; } .container:target .image_fille { display: none; } .container:target .image_gars { display: block; } 

 <div class="container" id="image_gars"> <div id="banniere"> <img class="image_fille" src="" alt="image fille" /> <img class="image_gars" src="" alt="image gars" /> <a href="#image_fille" id="bouton_prev">bouton prev</a> <a href="#image_gars" id="bouton_next">bouton next</a> </div> <div id="ProgressBar"> <div class="image_fille">half progress</div> <div class="image_gars">full progress</div> </div> </div>