jquery - 如何根据是否仅使用 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>