使用 css 覆盖图标而不会丢失点击事件/链接

Question

我正在寻找一种方法来实现一个简单的 CSS 覆盖以在图像上显示缩放图标。 我在这里找到了“几乎”正确的答案：Overlay a play icon on top of thumbnail with css

事情是它“剥离”了元素中的链接。我有一个带有漂亮照片的更大图片的链接，但该图标没有链接。它没有任何点击事件。

有没有办法将链接保留在叠加层下方？

谢谢

Answer 1

播放图标有一个非常高的z-index 并覆盖了链接。尝试将play-icon 类添加到<a> 而不是<li>：

<ul>
  <li>
    <a class="play-icon" href="..."><img src="..." alt="..." /></a>
  </li>
</ul>

您可能还需要调整参考解决方案中的一些样式。