magnific popup показать название на пробел клика

Question

Я использую magnific popup в моей галерее wordpress. Но я хочу, чтобы заголовок (.mfp-title) исчезал, если пользователь нажимает элемент span (info). Я попытался следующие решения, но ничего не получится:

Непрозрачность: 0 для .mfp-заголовка и добавить класс с непрозрачностью: 1, если пользователь нажмет на информации:

jQuery(document).ready(function() { 
jQuery('.mfp-info').click(function(){ 
    jQuery('.mfp-title').toggleClass('title-active'); 
}); 
}); 

Результат: Nothings случаться если я нажимаю на информации

CSS решение:

.mfp-title {opacity: 0;} 
.mfp-info:hover + .mfp-title{opacity: 1 !important;} 

такой же результат, как решение до (даже с дисплеем: нет/блок).

Я также попытался это решение:

$(".mfp-info").hover(function() { 
$(this).find(".mfp-title").show(); 
} 

$('.mfp-title').mouseout(function() { 
$('.mfp-title').hide(); 
}); 

Это всего лишь 3 из 13 решений я пытался в течение последних дней, будет работать над другими проектами или в отдельных документах, но не в сочетании с Magnific всплывающего окна. Или не возможно добавлять классы по элементам всплывающего окна?

EDIT: Нашли ошибку, если вы используете MagnificPopup Скрипт должен быть в обратные вызовы в условном MFP, потому что остальная часть сайта деактивируется, если MFP открыт.

Answer 1

Попробуйте первую попытку, но с использованием «на» и применить его к каждому конкретно:

jQuery(document).ready(function() { 
    jQuery('.mfp-info').on('click', function(){ 
     var title = $(this).next('.mfp-title'); 

     title.toggleClass('title-active'); 
    }); 
}); 

Я удивлен, что решение CSS не работает, хотя, вы уверены, что ваш мфу-информация имеется map-title как непосредственно следующий брат?