изображения увеличить с помощью UL и LI не работает

Question

Используя следующий код для простого изображения увеличения (показать QR-код изображение, когда пользователь наводит курсор на значок)

Weird вещи им, используя один и тот же код на 2 конструкций, а также на один он не работает?

Пожалуйста, посмотрите внизу страницы, на нижних колонтитулах для значка WeChat рядом с социальными значками.

Работа на 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 внутри нижнего колонтитула (где расположены значки) является относительным позиционированием). Бу нет второго родителя на втором сайте.

Когда вы устанавливаете, что оболочка обложки изображения как абсолютная отравленная, она выходит из экрана, потому что она принимает ближайший родитель с относительным позиционированием, который является телом в качестве эталона.

Чтобы исправить это, установите положение по отношению к .ul.enlarge или #footer, чтобы абсолютное положение могло ограничить область внутри. (вам нужно немного изменить значения позиции, хотя). Я просто проверял, что он работает таким образом. Или, в качестве альтернативы, создать другой относительный позиционный родитель для этой области.