Android上的Chrome不尊重链接点击的z-index

Question

HTML

<div class="container">

    <div class="child">
        <a href="http://www.google.com" target="_blank">Google</a>
    </div>
</div>
<a href="http://www.yahoo.com" target="_blank" class="y">Yahoo</a>

CSS

.container{position: relative;display: block;width: 100px;height: 30px;background: #000;z-index: 7;}
.child{position: absolute;width: 100px;height: 100px;background: #CCC;padding-top: 30px;z-index:9;top: -999px;}
.child a{display: block;}
.container:hover .child{display: block;top: 0;}
.y{z-index: 6;}

工作示例:http://jsfiddle.net/DemjR/6/

我已经在上面的例子中创建了CSS悬停菜单(在链接中),奇怪的是它没有工作,因为它假设在android设备中的chrome(v 25.0.1364.123).但它在我测试的其他所有设备中都能正常工作(ios,windows,mac等..)

问题是(在android中):当你将鼠标悬停在黑匣子上时,会出现一个灰色的div,里面有一个链接(google.com).

当您点击该链接时,它实际上会触发后面的链接(yahoo.com)而不是(google.com)

这是Android设备中的chrome bug吗？

提前致谢

Answer 1

Chrome，在这种情况下是在点击之前触发 mouseOUT！

这是另一个小提琴，显示 DIV 上的 HOVER 事件以及 LINKS 上的单击事件：

http://fiddle.jshell.net/gnv9n/18/ <-- 这应该适用于所有浏览器。仅使用 webkit 转换，因为您的问题仅发生在 Chrome 上。

如果添加 css3 过渡，则可以正确触发点击！这是一个丑陋的修复方法，但它确实有效。

如果您想看到 Chrome 在“悬停”之前无法单击，请尝试删除 css 过渡并查看事件

感谢 Kinlan 将问题提交给 Chrome 团队！