Невозможно получить состояние наведения, работающее с Magnific Popup

У меня есть изображение и фоновое состояние наведения, работающее на моих миниатюрах, однако я могу только заставить работать состояние наведения или всплывающее окно Magnific, а не оба.

Мое наложение запускается классом div "overlay"

Вот 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 hoverstate:

.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
person Yashar    schedule 17.02.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Мне пришлось немного исправить структуру HTML, а также добавить два отдельных события JS: событие magnificPopup, применяемое к селектору .mix, и событие 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
    });
person Alessandro Bassi    schedule 17.02.2014