我偶然发现了这个非常整洁的注解叠加效果：http://tympanus.net/codrops/2012/05/14/annotation-overlay-effect-with-css3/
你可以在这里看到一个现场演示：http://tympanus.net/Tutorials/CSS3AnnotationOverlayEffect/（你需要点击那里的图片才能看到效果）
我正在尝试通过一些外部链接使注释 <span> 中的文本可点击，例如：
<span><a href="http://google.com">Easy Theme Options</a></span>
但它不起作用...每当我单击注释时，它都会转换回全尺寸图像。
感谢您的帮助，谢谢！
【问题讨论】：
标签： html css css-transitions effect
正如您在this Fiddle 中看到的那样，我让它工作了。
问题是复选框总是跨越跨度。而且因为所有的复选框和跨度都是绝对定位的，所以更改 z-index 是行不通的！我发现它只与 CSS 一起工作的唯一方法（通过不改变太多）是弄乱pointer-events 属性和<div class="ao-annotations"> 的z-index。 （z-index 在一个元素中分层。因为注解<div> 和复选框都在<div class="ao-preview"> 中，所以更改<span> z-index 将不起作用。
我做了以下事情：
我将div.ao-annotations 的z-index 设置为高于input.ao-toggle。这导致无法点击输入，因此无法切换。
为了解决这个问题，我将pointer-events: none 添加到<div class="ao-annotations">。现在结果是一样的，但 <span>s 现在位于输入的顶部。
为了能够点击<span>s，我添加了这个 CSS：
input.ao-toggle:checked ~ .ao-annotations span{
pointer-events: auto;
}
这导致只有在选中复选框时才能点击<span>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 'hack' 或重建 HTML / CSS。
希望你能以此为基础！
【讨论】：