使用CSS3 by Tympanus使注释覆盖效果中的注释可单击

Question

我遇到了这个非常简洁的注释叠加效果：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>

但它不起作用......每当我点击注释时，它都会转换回完整尺寸的图像。

感谢您的帮助，谢谢！

Answer 1

正如你在this Fiddle中看到的那样，我使它成功了。

问题是复选框总是在跨度上。并且因为所有复选框和跨度都是绝对的，所以更改z-index将不起作用！我发现它只使用CSS（不改变太多）的唯一方法是弄乱pointer-events属性和<div class="ao-annotations">的{​​{1}}。 （z-index在元素中分层。由于注释z-index和复选框都在<div>中，因此更改<div class="ao-preview"> <span>将无效。< / p>

我做了以下事情：

我将z-index的z-index设置为高于div.ao-annotations。这导致无法点击输入，因此无法切换。

要解决此问题，我已将input.ao-toggle添加到pointer-events: none。现在结果是相同的，但<div class="ao-annotations">现在位于输入的顶部。

为了能够点击<span>我添加了这个CSS：

<span>

这导致只有在选中复选框时才能点击input.ao-toggle:checked ~ .ao-annotations span{ pointer-events: auto; } 。

要点：

<span>

我很伤心地说，在IE11这只作品（和所有其他浏览器）......所以，你可能不得不“黑客” JavaScript或重建HTML / CSS。

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