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

Question

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

然而，由於預期的第二圖像欄無法顯示，該欄將不會切換到它（像滑塊正常工作）

你能幫我什麼時候調整？

謝謝！ 奧黛麗

#slider { 
 
\t  position: relative;  
 
\t  width: 100%;   
 
\t  height: 400px;  
 
\t  overflow: hidden;  
 
    } 
 

 
    #images_slider { 
 
\t  position: absolute; 
 
\t  top: 0;    
 
\t  left: 0;    
 
\t  margin: 0;    
 
\t  padding: 0; 
 
     width: 100%;   
 
\t  height: 400px; \t 
 
    } 
 

 
    #images_slider li { 
 
\t  display: flex;  
 
    } 
 

 
    #images_slider img { 
 
\t  width: 100%; 
 
\t  height: 450px; 
 
    } 
 

 
    #image_gars:target #image_fille { 
 
\t  left: -150%; 
 
    } 
 

 
    #banniere #bouton_prev { 
 
\t  position: absolute; 
 
\t  left : 0; 
 
\t  top: 42%; 
 
\t  border : solid rgba(153,153,153,0.2) 0.1px; 
 
\t  background-color: rgba(153,153,153,0.2); 
 
\t  width: 25px; 
 
\t  height: 50px; 
 
\t  border-top-right-radius: 100px; 
 
     border-bottom-right-radius: 100px; 
 
     padding-top: 10px; 
 
     padding-right: 5px; 
 
     z-index: 6; 
 
    } 
 

 
    .fa.fa-chevron-left { 
 
\t  position: absolute; 
 
\t  left : 0; 
 
\t  top: 45%; 
 
\t  margin-left: 5px; 
 
\t  color: white; 
 
\t  z-index: 4; 
 
    } 
 

 
    #banniere #bouton_next { 
 
\t  position: absolute; 
 
\t  right: 0; 
 
\t  top: 42%; 
 
\t  border : solid rgba(153,153,153,0.2) 0.1px; 
 
\t  background-color: rgba(153,153,153,0.2); 
 
\t  border-top-left-radius: 100px; 
 
     border-bottom-left-radius: 100px; 
 
     padding-top: 10px; 
 
     padding-left: 5px; 
 
     width: 25px; 
 
\t  height: 50px; 
 
\t  z-index: 6; 
 
    } 
 

 
    .fa.fa-chevron-right { 
 
\t  position: absolute; 
 
\t  right: 0; 
 
\t  top: 45%; 
 
\t  color: white; 
 
\t  margin-right: 5px; 
 
\t  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，事實證明它們都不是有針對性的。

我添加了一個包含分區現在攜帶觸發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>