html - Tympanus 使用 CSS3 在注释叠加效果中使注释可点击

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属性(property)和<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>我添加了这个 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 进行“破解”或重建 HTML/CSS。

我希望你能以此为基础!