html - 如何在鼠标单击链接时在链接页面的小弹出窗口中显示实时预览？

Question

我的问题是基于这个 answer 的用法.我想使用这个解决方案，如图所示 here .但是我希望在单击链接后看到 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

不使用 anchor 标记，但您可以使用复选框 hack 来做到这一点。

.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 伪类点击 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>