当前位置:  开发笔记 > 编程语言 > 正文

如何仅使用CSS在div的鼠标悬停上在单独的div中弹出图像?

如何解决《如何仅使用CSS在div的鼠标悬停上在单独的div中弹出图像?》经验,为你挑选了1个好方法。

我有一个小缩略图库.当我将鼠标指针放在缩略图图像上时,我希望在屏幕右上角的div中弹出一个完整大小的图像.我已经看到这只使用CSS完成,我想沿着那条路走下去,而不是在可能的情况下使用javascript.



1> Jesse Millik..:

纯CSS Popups2,来自同一网站,为我们带来Complexspiral.请注意,此示例使用实际导航链接作为翻转元素.如果你不想这样,它可能会导致IE版本的一些粘性.

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

Text 

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

a img.popup { display: none }

然后在链接翻转上,将其设置为显示.

a:hover img.popup { display: block }

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

推荐阅读
手机用户2402851155
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有