li元素中的复选框不会触发css：checked

Question

这不可能吗？我已经创建了一个响应式菜单系统，但是我的复选框中的：checked事件没有被我的css抓住

CSS

MainActivity

HTML

#sectiona:checked + #asection {
    display: block;
}

之前我已经看过这样的事了。如果这不可能，我将不得不重新设计我的菜单。它必须是HTML和CSS。不允许使用Javascript ...

Answer 1

如果情况不正确，您尝试根据标签点击显示/隐藏复选框输入。

visibility可以解决问题。

Css：

＆＃13;

＆＃13;

input#sectiona:checked  {
   visibility: visible;
}

input#sectiona {
 visibility: hidden;
}

＆＃13;

<li >
<label for="sectiona" class="showhide">Search for a term</label>
<input type="checkbox" id="sectiona" value="button" />                   
</li>

＆＃13;

＆＃13;

＆＃13;

在这种情况下，您还可以添加display: block;

input#sectiona:checked  {
  visibility: visible;
  display: block;
}