我在引导程序 4 上使用花式盒子时遇到问题

Question

>我得到了这个代码：

<section class="call-to-action text-white text-center" id="Productos">
<div class="overlay"></div>
<div class="container">
<div class="col-xl-9 mx-auto">
<h2 class="mb-4">Productos</h2>
</div>
<a data-fancybox="gallery" href="img/ImagenShowcase.png"><img src="img/ImagenShowcase.png"></a>
<a data-fancybox="gallery" href="img/ImagenShowcase.png"><img src="img/ImagenShowcase.png"></a>
<a data-fancybox="gallery" href="img/ImagenShowcase.png"><img src="img/ImagenShowcase.png"></a>
<a data-fancybox="gallery" href="img/ImagenShowcase.png"><img src="img/ImagenShowcase.png"></a>
</div>
</section>

当我将它与引导程序一起使用时，不允许我单击图像来拉灯箱，idk 该怎么办，我已经花了大约一个月的时间。

Answer 1

此元素使其下面的所有元素无法访问，将其删除，它应该可以正常工作 -

<div class="overlay"></div>

https://codepen.io/anon/pen/eLJKRm?editors=1100

另一种解决方案是向该元素添加pointer-events: none;：

https://codepen.io/anon/pen/VGedrM?editors=1100

顺便说一句，你真的花了一个月的时间吗？您只需使用鼠标右键单击，然后选择"检查元素"。