彈出當光標點擊CSS

Question

這裏是我的代碼：

   <div class="checkbox"> 
        <input id="230am" type="checkbox" onclick="openPopup()"> <label for="230am"></label> 

        <div id="popupBk"> 
         <div id="title">Reminder</div> 
         <div id="timeSelect"> 
          Start time: <input id="field1" /><br /><br /> 
          End time: <input id="field2" /><br /><br /> 
         </div> 

         <button onclick="processTime('field1','field2')" name="submit" id="submitButton"/>Create</button> 
         <div id="close_popup" title="Close this menu" onclick="closePopup()"> 
          <p>X</p> 
         </div> 
        </div> 

       </div> 
       <div class="checkbox"> 
        <input id="3am" type="checkbox"> <label for="3am"></label> 

       <div id="popupBk"> 
         <div id="title">Reminder</div> 
         <div id="timeSelect"> 
          Start time: <input id="field1" /><br /><br /> 
          End time: <input id="field2" /><br /><br /> 
         </div> 

         <button onclick="processTime('field1','field2')" name="submit" id="submitButton"/>Create</button> 
         <div id="close_popup" title="Close this menu" onclick="closePopup()"> 
          <p>X</p> 
         </div> 
        </div> 

       </div> 

下面是我的CSS：

 #popupBk{ 
     position: absolute; 
     width: 25%; 
     height: 20%; 
     border: 2px solid grey; 
     border-radius: 2px; 
     background-color: white; 
     margin-left: 3%; 
     box-shadow: 2px 2px 10px; 
     display: none; 
     } 

所以我試圖做一個日曆應用程序。我把兩個彈出框放在兩個複選框中，只是想點擊一下不同的彈出框就會顯示在每個複選框下。任何想法如何做到這一點？

我認爲有一種方法可以讓每個類的名稱不同，然後創建自己的CSS，但如果這可能需要一個巨大的工作。或者還有其他方法嗎？

謝謝。

Answer 1

您可以在CSS中使用:checked狀態的複選框，並配合一般的兄弟選擇器（~）來執行此操作。

閱讀關於這裏同胞選擇：https://css-tricks.com/child-and-sibling-selectors/

這裏是一個活生生的例子：

.wrapper { 
 
    float: left; 
 
} 
 

 
.hidden { 
 
    border: 1px solid #000; 
 
    display: none; 
 
} 
 

 
input[type="checkbox"]:checked ~ .hidden { 
 
    display: block; 
 
}

<div class="wrapper"> 
 
    <input type="checkbox" id="box1" /> <label for="box1">Show Box 1</label> 
 

 
    <div class="hidden">Box 1</div> 
 
</div> 
 

 
<div class="wrapper"> 
 
    <input type="checkbox" id="box2" /> <label for="box2">Show Box 2</label> 
 

 
    <div class="hidden">Box 2</div> 
 
</div>