Question

使用以下代码进行简单图像放大（用户悬停图标时显示QR码图像）

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

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

使用https://www.webxury.com/datacenter/

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容器（图标所在的位置）是相对定位的）。在第二个站点中没有相对父级。

当您将图像图标包装器跨度设置为绝对中毒时，它会离开屏幕，因为它将最接近的相对定位父级（即主体）作为其基准。

要修复它，请设置相对于.ul.enlarge或#footer的位置，以便绝对位置可以限制其中的区域。（你需要稍微调整一下位置值）。我只是测试它以这种方式工作。或者为该区域创建另一个相对定位的父级。

图像放大使用UL和LI不起作用

1 个答案: