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

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

奇怪的是，我在两个设计中使用了相同的代码，而在一个设计中它不起作用

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

致力于

不工作

CSS

HTML

只是查看了一下您的网站并找到了原因。它实际上是在一个错误的位置显示，所以你看不到它。 它在第一个站点中工作，因为页脚内的.col-md-4容器（图标所在的位置）是相对定位的）。但是在第二个站点中没有相对的父站点

当您将图像图标包装范围设置为绝对中毒时，它将退出屏幕，因为它将最接近的相对定位父对象（即身体）作为其基准

若要修复此问题，请设置相对于.ul.放大或#页脚的位置，以便绝对位置可以限制范围内的区域。（不过，您需要稍微调整位置值）。我刚刚测试过它是这样工作的。

---

或者为该区域创建另一个相对定位的父对象

检查您的错误控制台。JS和加载JS文件时出现多个错误，这可能与此有关。对不起，我该怎么做？LolIn Chrome、F12开发工具和控制台选项卡。

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*/
}

<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>