我有一间小型的缩略图库。当我将鼠标指针放在缩略图上时，我希望在屏幕右上角的div中弹出完整尺寸的图像。我已经看到仅使用CSS就能做到这一点，我想走那条路线，而不是尽可能使用javascript。

解决方案

Eric Meyer的Pure CSS Popups 2演示声音听起来与我们想要的足够相似。

这里有一些例子：

• CSS图片库
• 跨浏览器多页图片库
• 仅CSS的图片库：解释
• 仅CSS的图片库：示例

最后一个动作是单击。只是为了使行为完整。

来自同一网站的纯CSS Popups2，为我们带来了Complexspiral。请注意，此示例将实际的导航链接用作过渡元素。如果我们不希望这样做，可能会导致有关IE版本的粘性。

基本技术是将每个图像粘贴在带有实际href的链接标记内(否则，某些IE版本会忽略：hover)

<a href="#">Text <img class="popup" src="pic.gif" /></a>

并使用绝对位置巧妙地放置它。最初隐藏图像

a img.popup { display: none }

然后在链接过渡上将其设置为显示。

a:hover img.popup { display: block }

这是基本技术，但是由于图像标签位于链接标签内部，因此始终存在主要的定位限制。有关详细信息，请参见链接；他使用了比显示更棘手的东西：没有一个可以隐藏图像。

CSS Playground使用纯CSS进行此类操作，其中的一个演示肯定会为我们提供帮助，因为所有CSS都只是查看源代码，以了解我们可能想使用：hover伪类，但根据浏览器的不同，其局限性定位。