无法使用 Magnific Popup 获得悬停状态答案

【问题标题】：Cannot get hover state working with Magnific Popup无法使用 Magnific Popup 获得悬停状态
【发布时间】：2014-02-17 01:13:04
【问题描述】：

我的缩略图上有一个图像和背景悬停状态，但是我似乎只能让悬停状态或 Magnific 弹出窗口工作，不能同时工作。

我的叠加层是由 div 类“叠加层”触发的

这是弹出的图像的 HTML（没有功能叠加）：

<ul id="Grid">
    <li class="mix category_1 mix_all">
        <div class="overlay"> <a href="http://i.imgur.com/i5SwjyO.jpg"><img src="http://i.imgur.com/J4PaouI.jpg" alt="#"></a>

        </div>
    </li>
</ul>

这是具有有效叠加层的图像的 HTML（但图像弹出窗口不起作用）：

<ul id="Grid">
    <li class="mix category_2 mix_all"> <a href="http://i.imgur.com/i5SwjyO.jpg"><img src="http://i.imgur.com/J4PaouI.jpg" alt="#"></a>

        <div class="overlay"></div>
    </li>
    <ul>

这里是相关的悬停状态 CSS：

.mix_all:hover .overlay {
    background: url(http://i.imgur.com/DZcK9ge.png) no-repeat center !important;
    background-color: #de6573 !important;
    opacity: 0.9;
}

这是包含两个示例的 jsfiddle：http://jsfiddle.net/yashar/wz4BT/10/

【问题讨论】：

标签： css magnific-popup

【解决方案1】：

我不得不稍微修正一下 HTML 结构，还添加了两个单独的 JS 事件：应用于 .mix 选择器的 magnificPopup 事件，以及应用于叠加层的单击事件，以允许它们单击锚标记和触发弹窗事件。

链接： http://jsfiddle.net/GQZVR/

HTML：

<ul id="Grid">
    <li class="mix category_1 mix_all">
        <div class="overlay"></div>
        <a href="http://i.imgur.com/i5SwjyO.jpg"><img src="http://i.imgur.com/J4PaouI.jpg" alt="#"></a>
    </li>
    <li class="mix category_2 mix_all"> 
        <div class="overlay"></div>
        <a href="http://i.imgur.com/i5SwjyO.jpg"><img src="http://i.imgur.com/J4PaouI.jpg" alt="#"></a>    
    </li>
</ul>

CSS（添加光标：指针）：

.mix_all .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

JS：

$('.overlay')
    .click(function(){
        $(this).next('a').trigger('click');
    });
$('.mix')
    .magnificPopup({
        delegate: 'a', // child items selector, by clicking on it popup will open
        gallery: {
            enabled: false //disabling the gallery for now
        },
        type: 'image' //type of lightbox
    });

【讨论】：