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错误吗？

提前致谢

Answer 1

这似乎是Android上M25 Chrome的一个错误，我向eng团队提出了一个问题。关注https://code.google.com/p/chromium/issues/detail?id=180194

Answer 2

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

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

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

如果添加css3转换，则会正确触发点击！这是一种丑陋的修复，但它有效。

如果您希望在“悬停”之前看到Chrome有效，请尝试删除css转换并查看事件

感谢Kinlan向Chrome团队提交问题！

Answer 3

我想对Anthony Gatti的回答发表评论，但我没有足够的声誉：

比设置-website-transition-duration更好的选择是设置-website-transition-delay。

示例：http://fiddle.jshell.net/gnv9n/28/

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

3 个答案: