Question

我会尽量简短，我做了一个设计，当我将鼠标通过带有图像的盒子时，它使用css效果提升了一点，我显示了两个按钮，其中一个是当我点击打开一个按钮时视频使用fancybox插件3。

当我关闭视频时，该框保持粘贴效果，直到我将鼠标放回框中，如图所示。

如何制作视频，视频关闭时，框的图像会恢复正常？

我复制了我在样式表和fancybox代码3

中使用的代码

的javascript：

$(".imagen-evento").hover(function() {
    $(this).find(".imagen").toggleClass("imagenHover");
    $(this).find(".caption").toggleClass("captionHover");
});

$("[data-fancybox]").fancybox({
    buttons : [
        'close'
    ],
    afterClose : function(instance, current) {
        $(".imagen-evento").each(function(){
            $(this).find(".imagen").removeClass('imagenHover');
            $(this).find(".caption").removeClass('captionHover');
        });
    }
});

的CSS：

.imagenHover {
    -webkit-transform: translateY(-47px);
    transform: translateY(-47px);
}
.captionHover {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
}

HTML：

    <div class="card">
        <div class="imagen-evento">
            <div class="imagen">
                <img class="card-img-top" src="/assets/images/p1.png" alt="Evento 1">
            </div>
            <div class="caption">
                <div class="btn-group">
                    <a href="/evento-en-chillout" class="btn text-lowercase">Más información</a>
                    <a href="https://www.youtube.com/watch?v=S4OTzltOzm0" data-fancybox="gallery" class="btn btn-sm text-lowercase btn-right">Ver video</a>
                </div>
            </div>
        </div>

        <div class="card-body">
            <div class="row detalles">
                <div class="col-3 fecha">
                    <div class="dia text-center uppercase">17</div>
                    <div class="mes text-center">nov</div>
                </div>
                <div class="col-9 descripcion pl-0">
                    <div class="lugar uppercase"><i class="fa fa-map-marker" aria-hidden="true"></i> Chill Out</div>
                    <div class="personas-lista"><i class="fa fa-male" aria-hidden="true"></i> 180 personas en lista</div>
                    <div class="tiempo-lista time-list"><i class="fa fa-clock-o" aria-hidden="true"></i> Tiempo de lista: <div class="tiempo d-inline-flex" data-time="2018/01/15 02:21:40"></div></div>
                </div>
            </div>
        </div>
    </div>

使用fancybox 3的“afterClose”选项，我尝试删除包含css中效果的类，但是当我看到该框时，它没有该类，但效果仍然被粘贴，就好像它是活动的一样。 / p>

好的，更好地解释一个例子...在下面的链接中点击“观看视频”按钮，当你关闭视频时，图像将再次被提升，这不应该发生。

https://jsfiddle.net/greermurray/9jt5Lzq3/1/

对CSS和fancybox附加组件的影响

0 个答案: