css - 如何只用css实现灯箱效果？可用示例

Question

http://www.w3css.co.uk/

该网站说它不使用 :target，我查看了源代码，据我所知没有 js，所以它只是 css 吗？如何 。非常感谢一个 fiddle 示例或解释。谢谢。

Answer 1

缩略图上使用的 CSS 选择器是 :focus 和 :active 选择器，当您单击 anchor 时应用它们(为了 IE 兼容性而激活，以及您将在 Firebug 中看到的内容)。

这些选择器仅具有 CSS 过渡，可将压缩的图像扩展到完整尺寸，然后显然 :focus 在您单击另一个元素时丢失并且灯箱消失。您也可以使用 Tab 键进行导航，这样做只是在 anchor 之间切换焦点，从而再次激活 CSS 过渡。