Question

我的缩略图上有一个图像和背景悬停状态，但我似乎只能让悬停状态或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>

这是相关的hoverstate 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/

Answer 1

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

链接： 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
    });

无法让悬停状态与Magnific Popup一起使用

1 个答案: