如何在鼠标单击链接上的一个链接页面弹出窗口中显示Live Preview

Question

我的问题是基于此答案的用法。我想使用此解决方案，如下所示。但是，我不想在鼠标上方查看iframe，然后单击链接，并可以再次单击。这仅使用CSS吗？

This live preview for <a href="http://en.wikipedia.org/">Wikipedia</a><div class="box"><iframe src="http://en.wikipedia.org/" width = "500px" height = "500px"></iframe></div> remains open on mouseover.
.box{
display: none;
width: 100%;
}
a:hover + .box,.box:hover{
display: block;
position: relative;
z-index: 100;
}

Answer 1

不是带有锚标签，但是您可以使用复选框黑客攻击。

.box{
  width: 100%;
}
input, .box {
  display: none;
}
#checkbox:checked + .box {
  display: block;
  position: relative;
  z-index: 100;
}

<label for="checkbox">Click</label>
<input id="checkbox" type="checkbox">
<div class="box">
  <iframe src="http://en.wikipedia.org/" width="500px" height="500px"></iframe>
</div>

使用 :target pseudo类单击a标签时，您可以显示iframe，但1）它会跳到页面上（无javaScript），以及2）您无法在不单击其他链接上的其他链接上关闭它页面并更改URL中的哈希。

.box{
  width: 100%;
  display: none;
}
.box:target {
  display: block;
  position: relative;
  z-index: 100;
}

<a href="#iframe">click to</a> | <a href="#whatever">click to close</a>
<div class="box" id="iframe">
  <iframe src="http://en.wikipedia.org/" width="500px" height="500px"></iframe>
</div>