html - 单击文本时显示另一个元素或使 :focus 在失去焦点后显示

Question

我的目标是在单击（带有 Show Me 文本）时显示带有类的p标签。我曾尝试使用伪选择器来执行此操作，但使用此方法只会显示标签，直到点击其他地方，标签再次隐藏。showspan:focuspp

有没有办法让:focus选择器即使在点击离开后也能显示（或）是否有不同/更好的方式（不使用 JS）来显示p点击 Show Me 的时间并使其即使在点击外部后也保持这种状态？

代码

<span class="span1" tabindex="0">Show Me</span>
<p class="show" >This will show on click</p>

CSS 代码

body {
  display: block;
}
.show {
  display: none;
}
.span1:focus ~ .show {
  display: block;
}

score 1 · Accepted Answer

伪类将:focus不起作用，因为正如命名所示，它仅适用于焦点在元素上并且即使在我们单击其他位置后也无法使焦点“粘住”。

实现此目的的另一种方法是使用:target ^[1]伪类/选择器。这将在p单击链接时进行显示，因为它被视为“目标”。

body {
  display: block;
}
.show {
  display: none;
}
#content:target {
  display: block;
}

<a class="span1" href='#content'>Show Me</a>

<p class="show" id='content'>This will show on click</p>

^[1] - :targetIE <= 8 不支持选择器。

1 回答 1