我如何弹出一个图像在一个单独的div上的鼠标的一个div仅使用CSS?

Question

我有一个小的画廊的略图。当我把我的鼠标在缩略图像我想要有一个全尺寸的图像突然出现在一个div在顶部右边的屏幕。我已经看到这种使用仅CSS和我想走这条路，而不是使用javascript如果可能的。

Answer 1

Pure CSS Popups2 ，来自为我们带来Complexspiral的同一网站。请注意，此示例使用实际导航链接作为翻转元素。如果您不想这样做，可能会对IE的版本造成一些粘性。

基本技术是将每个图像粘贴到带有实际href的链接标记内（否则某些IE版本将忽略：悬停）

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

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

a img.popup { display: none }

然后在链接翻转上，将其设置为显示。

a:hover img.popup { display: block }

这是基本技术，但由于图像标记停留在链接标记内，因此总会出现主要的定位限制。请参阅链接了解详情;他使用比显示更棘手的东西：没有隐藏图像。

Answer 2

CSS游乐场 使用纯CSS对于这种类型的事情，其中一个演示肯定是来帮助你，因为它是所有CSS只是看源来学习-你可能想要使用：悬停伪类，但仍存在局限性，它取决于浏览器的目标。

Answer 3

Eric Meyer的 Pure CSS Popups 2 演示听起来类似于你想要什么。

Answer 4

这里是一些例子：

• CSS图像的画廊
• 跨浏览器的多页的照片画廊
• CSS-只有图像的画廊：解释
• CSS-只有图像的画廊：例

这最后一项行为后点击。只是要完整的行为。