選中的復選框不起作用。 HTML CSS

Question

我正在使用復選框方法創建滑動導航欄。

[但僅出於演示目的，我將背景更改為“藍色”]

我使用了 label 並且如果選中了復選框，它的背景將變為“藍色”。 但它不工作

請解釋為什么？？？？

[見代碼https://codepen.io/adi45code/pen/abmxgQj ]

HTML

<div class="position-right">
        <div class="nav-ele home">Home</div>
        <div class="nav-ele about">About</div>
        <div class="nav-ele services">Service</div>
        <div class="nav-ele goals">Goals</div>
        <div class="nav-ele contactus">Contact Us</div>
      </div>
      
      <!--Checkbox Toogle-->
     <input type="checkbox" id="checkbox"/>
    <label for="checkbox"><span>ColorRed</span></label>

CSS

  .position-right {
    flex-direction: column;
    background: #000000;
    width: 50%;
    height: 200px;
    text-align: center;
    transition: all .2s;
    position: absolute;
    left: -10px;
    color: red;
  }
  #checkbox:checked +.position-right {
    background: blue;
  }
  
span,input{
  position: absolute;
  right: 0;
  padding :10px;
}
input{
  top: 30px;
}
span:hover{
  color: red;
}

Answer 1

問題是,,+,, 選擇器僅針對,,+,, 選擇器左側的元素的下一個兄弟（在您的情況下，您的復選框）。

由於label是復選框的下一個兄弟，因此您的代碼將無法工作。

您所要做的就是替換您的div和您的checkbox的位置，以便div將出現在復選框之后（此外，您必須將 label 放在復選框之前，而不是之后）。

這是固定版本，希望對你有所幫助:)

https://codepen.io/Juka99/pen/vYXMoOY

Answer 2

您必須更改輸入復選框的 position，因為，+，選擇器僅針對下一個兄弟

 .position-right { flex-direction: column; background: #000; width: 50%; height: 200px; text-align: center; transition: all.2s; position: absolute; left: -10px; color: red; } #checkbox:checked +.position-right { background: blue; } span,input{ position: absolute; right: 0; padding:10px; } input{ top: 30px; } span:hover{ color: red; }

 <,DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1"> <title></title> <link rel="stylesheet" href="style.css" title="" type="" /> </head> <body> <!--layout--> <!--Checkbox Toogle--> <label for="checkbox"><span>ColorBlue</span></label> <input type="checkbox" id="checkbox"/> <div class="position-right"> <div class="nav-ele home">Home</div> <div class="nav-ele about">About</div> <div class="nav-ele services">Service</div> <div class="nav-ele goals">Goals</div> <div class="nav-ele contactus">Contact Us</div> </div> </body> </html>

選中的復選框不起作用。 HTML CSS

問題描述

2 個解決方案

解決方案1
1 2021-01-22 06:51:28

解決方案2
1 2021-01-22 07:00:22

選中的復選框不起作用。 HTML CSS

問題描述

2 個解決方案

解決方案1 1 2021-01-22 06:51:28

解決方案2 1 2021-01-22 07:00:22

解決方案1
1 2021-01-22 06:51:28

解決方案2
1 2021-01-22 07:00:22