overflow:绝对位置元素旁边的可见链接不可点击

Question

我有两个绝对定位的div元素,它们彼此相邻放置.第一个div元素有overflow: visible一个带有长内容的链接,它在相邻的div元素之上流动.我试图点击相邻div的链接,没有运气 - 在Chrome和Firefox中.这适用于IE9.一些代码示例将解释我想要做的事情 -

<div>
  <a href="#">Reeeeeeeeeeeeeaallllllly Looooon Liiink Teeeext</a>
</div>
<div class="two">
</div>?

样式表:

div{
position: absolute;
height: 50px;
width: 80px;
border: 2px solid;
overflow: visible;
white-space: nowrap;
z-index: 1;
}
.two{
left:82px;
}
a{
z-index: 2;
}

jsfiddle:http://jsfiddle.net/yzSwL/1/

有什么建议？我认为z-index可能有所帮助,但没有.当鼠标悬停在第二个div上时,链接文本也无法选择.

提前致谢.

UPDATE

实际上我的场景比我更加复杂,因为我没有意识到答案会在哪里.指针事件看起来是最干净的解决方案,但不幸的是我不能使用它,因为所有的div都可能有链接.

一个更现实的jsfiddle:http://jsfiddle.net/yzSwL/6/

只是为了解释我想要得到的东西 - 我正在制作一个带有小时网格的计划应用程序,其中有很多定位的div彼此相邻.每个div都可以有一个链接.链接的宽度是约会的长度.

Answer 1

您可以通过设置pointer-events:none;类.two 来完成此操作

指针想要专注于顶部div,但如果你告诉它不要,它将转到后面的div.

工作小提琴:http://jsfiddle.net/yzSwL/2/