0

我正在使用复选框方法创建滑动导航栏。

[但仅出于演示目的，我将背景更改为“蓝色”]

我使用了标签，如果选中了复选框，它的背景变为“蓝色”。但它不工作

请解释为什么？？？？

[参见 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;
}
4

2 回答 2

1

问题是 ,,+,, 选择器仅针对 ,,+,, 选择器左侧的元素的下一个兄弟（在您的情况下，您的复选框）。

而且因为label是复选框的下一个兄弟，所以您的代码将不起作用。

您所要做的就是替换 yourdiv和 your 的位置checkbox，以便div将出现在复选框之后（另外，您必须在复选框之前放置标签，而不是在它之后）。

这是固定版本，希望对你有所帮助:)

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

于 2021-01-22T06:51:28.897 回答
1

您必须更改输入复选框的位置，因为 ,+ 选择器仅针对下一个兄弟

  .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>

于 2021-01-22T07:00:22.637 回答