链接后面无法访问:focus, 移开, div

Question

我正在为我的公司使用纯 HTML/CSS 制作交互式图形。不允许使用 JavaScript。
我的问题是：我有三个 div，一个在前面，两个在后面。前面的 div 应该在聚焦时变为不可见。 后面的两个 div 应该链接到其他页面，但是链接不起作用，因为每次单击时，顶部元素再次变得没有焦点，并将它们覆盖。
这是我的代码，我还构建了一个模拟问题的小提琴：http://jsfiddle.net/kj8Us/

HTML

<div class="front" tabindex="0">
Click me please!
</div>
<a href="www.google.com">
    <div class="back green"></div>
</a>
<a href="www.yahoo.com">
    <div class="back blue"></div>
</a>

CSS

.front{ 
    height:150px;
    width:150px;
    position:absolute;
    z-index: 100;
    background: rgba(243, 146, 0, 0.5);
    border: 5px solid #F39200; }
.back{
    height:100px;
    width:100px;
    position:realtive;
    z-index:0;
}
.green{
    background:green;
}
.blue{
    background:blue;
}
div.front:focus{
  opacity:0;
  margin:-100px -100px;
  -webkit-transition: margin:2s;
  -webkit-transition: opacity: 0.5s;
}
.back:hover{
    width:200px;
}

我发现的与此类似的问题是：

accessing divs behind other divs
Child div behind parent div, how to fix link?
Clickable divs beneath transparent div
但它并没有真正帮助，因为它们并不完全符合我的上下文......

所以，问题是：我怎样才能使链接工作？

希望你能帮助我...谢谢！
死鱼利

Answer 1

如果您的网站允许使用 CSS3，则使用转换延迟可以解决您的问题。基本上，将聚焦时的转换延迟设置为零秒（它会立即隐藏），并将取消聚焦时的转换延迟设置为更大的秒数（它将等待取消隐藏，这应该为点击链接提供足够的时间）。

这是对 CSS 的非常尴尬的用法，我个人会为此使用 JavaScript……但有时你不能生活在一个完美的世界中。 ：/

CSS：

.front {
    transition-delay: 100000s;
    -webkit-transition-delay: 100000s;
}

div.front:focus{
    transition-delay: 0s;
    -webkit-transition-delay: 0s;
}

JSFiddle here.