基于无线电元素的显示/隐藏div的CSS检查/未选中
基于无线电元素的显示/隐藏div的CSS检查/未选中
提问于 2022-09-02 10:16:44
我试着用下面的代码显示/隐藏一个div -
<label class="paper outer">
<div class="inner">
</div>
<input type="radio" name="clickedChoice">
</label>
.inner{
position:absolute;
width: 30px;
right:5px;
top:5px;
bottom: 5px;
}
input[name="clickedChoice"] ~ .inner{
display: none;
}
input[name="clickedChoice"]:checked ~ .inner{
display: block !important;
}但是.inner div仍然是可见的。我错过了什么？
Stack Overflow用户
回答已采纳
发布于 2022-09-02 10:31:53
<label class="paper outer">
<input type="checkbox" name="clickedChoice">
<div class="inner">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore minus
consectetur assumenda ducimus aliquam minima placeat maiores natus impedit
dolorum quod ipsam odio laboriosam, repellendus commodi, quam, saepe
voluptatibus ad!
</div>
</label>
<style>
.inner{
position:absolute;
width: 30px;
right:5px;
top:5px;
bottom: 5px;
}
input[name="clickedChoice"] ~ .inner{
display: none;
}
input[name="clickedChoice"]:checked ~ .inner{
display: block !important;
}
</style>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73581085
复制相关文章
相似问题
腾讯云开发者
