Question

我在wordpress画廊中使用了大胆的弹出窗口。但我想，如果用户点击span元素（info），标题（.mfp-title）会淡入。我尝试了以下解决方案，但没有任何方法可行：

为.mfp-title设置不透明度：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;}

与之前的解决方案相同（即使使用display：none / block）。

我也试过这个解决方案：

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

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

这些只是我在过去几天尝试过的13个解决方案中的3个，这些解决方案适用于其他项目或单个文档，但不能与夸张的弹出窗口结合使用。或者是不可能在magnific popup元素上添加类？

修改发现错误，如果您使用MagnificPopup，则脚本必须进入MFP条件中的回调，因为如果MFP处于打开状态，则会停用其余站点。

Answer 1

尝试第一次尝试，但使用“on”并将其应用于每个具体的：

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

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

我很惊讶CSS解决方案不起作用，你确定你的mfp-info有map-title作为直接下一个兄弟吗？

单击跨度上的巨大弹出显示标题

1 个答案: