我正在制作一个带有视频库的网站。我正在为视频库使用智能电网插件。该插件允许在图像标题部分插入 HTML 代码。所以使用 HTML 和 CSS,我添加了一个很棒的字体图标和一个当鼠标悬停在图像上时出现的外部链接。使用 CSS,我还在灯箱内放置了一个链接,将用户带到前面提到的相同外部链接。现在,我的问题是灯箱内的链接工作正常。但是出现在图像叠加层上的链接不起作用。相反,当我单击链接时,灯箱会打开。
放置在第一张图片标题中的 HTML 代码:
<div class="show-in-gallery">
Airbnb <br />
<i class="fa fa-play" aria-hidden="true">
</i>
<a class="GalleryLink" href="http://cirkus.co.nz/?p=57">
Read More
</a>
</div>
<div class="show-in-lightbox">
<a class="GalleryLink" href="http://cirkus.co.nz/?p=57">
Read more
</a>
</div>
CSS:
.show-in-lightbox {
display:none;
}
.pswp__caption .show-in-lightbox {
display:block;
}
.pswp__caption .show-in-gallery{
display:none;
}
button{
color:black;
}
.GalleryLink{
color: white;
}