我有一个小缩略图库.当我将鼠标指针放在缩略图图像上时,我希望在屏幕右上角的div中弹出一个完整大小的图像.我已经看到这只使用CSS完成,我想沿着那条路走下去,而不是在可能的情况下使用javascript.
纯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 }
这是基本技术,但由于图像标记停留在链接标记内,因此总会出现主要的定位限制.请参阅链接了解详情; 他使用比显示更棘手的东西:没有隐藏图像.