Html 通过Tympanus使用CSS3使注释在注释覆盖效果中可单击

我遇到了一个非常简洁的注释叠加效果：

你可以在这里看到一个现场演示：（你需要点击那里的图片才能看到效果）

我试图通过一些外部链接使注释

中的文本可单击，如：

<span><a href="http://google.com">Easy Theme Options</a></span>

但它不起作用。。。每当我单击注释时，它都会转换回全尺寸图像

---

谢谢你的帮助，谢谢

正如您在中看到的，我成功了

问题是，复选框始终位于跨度上方。由于所有复选框和跨距都是绝对定位的，因此更改

z-index

将不起作用！我发现它只与CSS一起工作的唯一方法（没有太多更改）是处理

指针事件

属性和

的

z-index

。（

z-index

是在一个元素中分层的。因为注释

和复选框都在

中，所以更改

z-index将不起作用

我做了以下工作：

我将

div.ao-annotations

的z索引设置为高于

input.ao toggle

。这导致无法单击输入，因此无法切换

为了解决这个问题，我在

中添加了

指针事件：none

。现在结果是相同的，但是

现在位于输入的顶部

为了能够点击

s，我添加了以下CSS：

input.ao-toggle:checked ~ .ao-annotations span{
    pointer-events: auto;
}

这导致选中复选框时只能单击

s

总结：

.ao-annotations {
    z-index: 20;
    pointer-events: none;
}

input.ao-toggle {
    z-index: 10;
}

input.ao-toggle:checked ~ .ao-annotations span{
    pointer-events: auto;
}

我很难过地说，这只适用于IE11（以及所有其他浏览器）……因此，您可能必须“破解”Javascript或重建HTML/CSS

---

我希望你能在这个基础上再接再厉！

你敢打赌我会在这个基础上再接再厉，你是我的英雄！！这正是我想要的！