html - 图像放大使用 UL 和 LI 不工作

Question

使用以下代码进行简单的图像放大(当用户将鼠标悬停在图标上时显示二维码图像)

奇怪的是我在 2 个设计上使用了相同的代码，而在一个设计上却不起作用？

请查看页面底部，社交图标旁边的微信图标的页脚。

正在处理 https://www.webxury.com/datacenter/

不工作 http://webxury.net/design/index.php

CSS

ul.enlarge{
list-style-type:none; /*remove the bullet point*/
margin: 0;
padding: 0;
float: right;
}
ul.enlarge li{
margin: 0;
padding: 0;
}
ul.enlarge img{
margin: 0;
padding: 0;
display: block;
}
ul.enlarge span img{
opacity: 1 !important;
}
ul.enlarge span{
position:absolute;
top: -9999px;
}
ul.enlarge li:hover span{ 
top: -110px; /*the distance from the bottom of the thumbnail to the top of     the popup image*/
left: 0px; /*distance from the left of the thumbnail to the left of the     popup image*/
}

HTML

<ul class="enlarge"><li><img src="images/wc.png" width="32px" height="32px"   alt="#" /><span><img src="images/qrcode.png" alt="QR" /></span></li></ul>

Answer 1

刚刚查看了您的网站并找到了原因。它实际上显示但在错误的位置 - 所以你看不到它。它适用于第一个站点，因为页脚内的 .col-md-4 容器(图标所在的位置)是相对定位的)。 Bu 在第二个站点中没有亲戚父项。

当您将该图像图标包装器范围设置为绝对中毒时，它会离开屏幕，因为它以最近的相对定位父级(即主体)作为基准。

要修复它，请设置相对于 .ul.enlarge 或 #footer 的位置，以便绝对位置可以限制范围内的区域。 (尽管您需要稍微调整位置值)。我刚刚测试了它以这种方式工作。或者为该区域创建另一个相对定位的父级。