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
但它并没有真正帮助，因为它们并不完全符合我的背景......

所以，问题是：如何使链接有效？

希望你能帮助我......谢谢！ deadfishli

Answer 1

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

这是非常笨拙的CSS使用，我个人会使用JavaScript ...但有时你不能生活在一个完美的世界。：/

CSS：

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

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

JSFiddle here.

链接无法在后面访问：焦点，移开，div

1 个答案: