Magnific酒店的彈出位置錯誤

Question

有一個奇怪的錯誤，當你有一個鏈接觸發Magnific酒店的彈出和鏈接都包含在一個絕對定位的元素，其定位在相對定位的元素裏面有溢出內部發生：隱藏。

重現bug在Chrome或Firefox籤這個例子：

http://codepen.io/mediadivisiongmbh/pen/bdRjKy

HTML

<div class="hover-container"> 
    <div class="hover-image"></div> 
    <div class="hover-content"> 
    <a class="image-popup" href="#">Evil Link</a> 
    </div> 
</div> 

CSS

.hover-container { 
    position:relative; 
    overflow:hidden; 

    /* Optional */ 
    width:50%; 
    background-color:gray; 
} 

.hover-image { 
    height:300px; 

    /* Optional */ 
    width:80%; 
    background-color:pink; 
    margin-left:10%; 
} 

.hover-content { 
    position:absolute; 
    top:100%; 

    /* Optional */ 
    height:100%; 
    width:100%; 
    text-align:center; 
    transition:top 0.5s; 
} 

.hover-container:hover .hover-content { 
    top:0; 
} 

個JS

$('.image-popup').magnificPopup(); 

Answer 1

爲了制止這種行爲只是添加這個CSS：

.image-popup { 
    display:none; 
} 

.hover-container:hover .image-popup { 
    display:inline-block; 
}