Question

当你有一个触发Magnific Popup的链接并且该链接包含在绝对定位元素中时，会发生一个奇怪的错误，该元素位于 relative 位置内元素溢出：隐藏。

要重现该错误，请在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;
}

Magnific Popup位置错误

1 个答案: