如何根据是否仅使用 CSS 检查复选框来更改元素不透明度？

Question

我知道我可以将 .is(':checked') 与 jQuery 一起使用，但是有 CSS 的方法吗？我有点想让这段 #navbar-checkbox:checked #mobile-nav { display: block; } 代码起作用，因为我知道我可以用 :hover 做类似的事情，但是有没有办法用 :checked 做呢？

所以完整的标记：

CSS

#mobile-nav { display: none; }
#navbar-checkbox:checked #mobile-nav { display: block; }

这就是我想要的。

Answer 1

看到您的标记会很有帮助，但这是可能的。

例如，这假定一个复选框 adjacent（由 + 组合器指定）到您要定位的元素：

.test {
  background-color: red;
  color: white;
}

input[type="checkbox"]:checked + .test { opacity: 0.5; }

<input type="checkbox">
<div class="test">Test</div>

Answer 2

#myDIv {
  display: none;
}
.myDiv input:checked + #myDIv {
  display: block;
}

<div class="myDiv">
  <input id="navbarcheckbox" type="checkbox" name="option" value="Test">
  <div id="myDIv">
    <span>Hello</span>
    <span>World!</span>
  </div>
</div>

如何根据是否仅使用 CSS 检查复选框来更改元素不透明度？

How to change elements opacity based on if checkbox is or is not checked with CSS only?

jquery

html

css

checkbox

checked