5

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

提前致谢

4

3 回答 3

3

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

于 2013-03-05T11:57:40.190 回答
2

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

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

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

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

如果您希望 Chrome 在“悬停”之前无法点击，请尝试删除 css 转换并查看事件

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

于 2013-03-05T12:24:23.633 回答
0

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

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

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

于 2013-12-23T06:12:05.807 回答