当您仅使用 CSS
单击 anchor 标记“单击我”时,有没有办法显示 p
标记“这是我的答案”?我知道我可以将 p
标记放在 anchor
标记之后并让它工作,但我想知道是否有办法让它与下面的代码一起工作?
<ul>
<li>
<div>
<a href="one" id="one"> Click me </a>
</div>
</li>
<div class="info">
<p> This is my answer </p>
</div>
</ul>
li {
list-style: none;
}
.info {
display:none;
}
.info:target {
display:block;
}
最佳答案
这是一个纯 CSS 记录的 hack,用于控制带有隐藏复选框的元素。这似乎确实跨越了“应该”的界限,但当然,这是可能的。
更多阅读:https://css-tricks.com/the-checkbox-hack/
li {
list-style: none;
}
label.link {
color: blue;
text-decoration: underline;
cursor: pointer;
}
div.info {
display: none;
}
#toggle-1 {
display: none;
}
#toggle-1:checked ~ div {
display: block;
}
<ul>
<li>
<div>
<label class="link" for="toggle-1">Click Me</label>
</div>
</li>
<input type="checkbox" id="toggle-1">
<div class="info">
<p>
This is my answer
</p>
</div>
</ul>
关于javascript - CSS 目标选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32314648/