Jquery 单击“范围”时显示标题的放大弹出窗口

我在我的wordpress图库中使用放大弹出窗口。但是我希望，如果用户单击span元素（info），标题（.mfp title）会淡入淡出。 我尝试了以下解决方案，但没有任何效果：

为.mfp标题设置不透明度：0，如果用户单击信息，则添加不透明度为1的类：

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

结果：如果我点击信息，什么都不会发生

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();
});

这些只是我在过去几天尝试的13个解决方案中的3个，它们将在其他项目或单个文档中工作，但不能与放大弹出窗口结合使用。或者不可能在放大的弹出元素上添加类

编辑：

---

发现错误，如果使用放大弹出，则脚本必须进入MFP条件中的回调中，因为如果MFP打开，站点的其余部分将被停用。

尝试第一次尝试，但使用“开”并将其应用于每一次：

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

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

---

我很惊讶CSS解决方案没有起作用，你确定你的mfp信息有地图标题作为下一个兄弟吗？

谢谢！我发现了我的错误。我将jQuery用于显示/隐藏标题放在我的标题中，但它必须放在回调中，因为如果打开放大弹出窗口，站点的其余部分将被停用。