0

我正在为我的公司使用纯 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;
}

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

访问其他 div
后面的 div 父 div 后面的子 div，如何修复链接？
透明 div 下方的可点击 div
但它并没有真正帮助，因为它们并不完全适合我的上下文......

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

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

4

1 回答 1

0

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

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

CSS：

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

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

JSFiddle在这里。

于 2013-09-29T09:04:53.197 回答