如何僅使用CSS在div的mouseover單獨的div中彈出圖像？

我有一個縮略圖的小畫廊。當我將鼠標指針放在縮略圖圖像上時，我希望在屏幕右上角的div中彈出一個全尺寸的圖像。我已經看到這只是使用CSS完成的，我想沿着這條路線走，而不是使用JavaScript，如果可能的話。如何僅使用CSS在div的mouseover單獨的div中彈出圖像？

2008-09-20 user18748

你也許應該去使用JavaScript如果瀏覽器的兼容性是非常重要的。 – 2008-09-20 15:23:15

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 }

這是基本的技術，但總是會成爲主要的定位限制，因爲圖像標籤的鏈接標籤內居住。詳情請參閱鏈接;他使用的東西一點點比顯示更靠譜：無隱藏圖像。

2008-09-20 15:32:39

Eric Meyer的Pure CSS Popups 2演示聽起來與您想要的相似。

2008-09-20 15:27:14

這裏有幾個例子：

這最後一個作用於點擊。只是爲了完成行爲。

2008-09-20 15:31:03

CSS Playground採用純CSS對於這種類型的事情，演示之一肯定是幫助你，因爲它是所有的CSS只是查看源代碼學習 - 你可能想使用：hover僞類，但也有侷限性，它取決於您的瀏覽器定位。

2008-09-20 15:33:31

回答