Android版Chrome不尊重的z-index的鏈接點擊

HTMLAndroid版Chrome不尊重的z-index的鏈接點擊

<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懸停菜單上面的例子（在鏈接），奇怪的是它不工作，因爲它是在鉻（v 25.0.13 64.123）在Android設備。但它工作正常在我測試的所有其他設備（IOS，在Windows，Mac等）

問題是（在機器人）：當你將鼠標懸停在黑盒子將出現一個灰色DIV其中有一個鏈接（ google.com）。

當你點擊該鏈接，它實際上觸發後面的鏈接（yahoo.com），而不是（google.com）

這是在Android設備Chrome錯誤？

在此先感謝

來源

2013-03-05 Kuldeep Daftary

測試上的HTC Desire 4.1自定義ROM與默認的瀏覽器，和作品。但是，我們應該如何將div懸停在設備上？它通過點擊它爲我工作。 – Bigood 2013-03-05 10:08:38

是點擊div，它會觸發懸停事件。 – 2013-03-05 10:15:21

鉻，在這種情況下，是點擊之前觸發鼠標！

這裏是另一個小提琴，顯示的鏈接上的DIV HOVER事件以及點擊事件：

http://fiddle.jshell.net/gnv9n/18/ < - 這應該在所有瀏覽器中運行。僅使用webkit轉換，因爲您的問題僅在Chrome上發生。

如果您添加了css3轉換，則會正確觸發點擊！這是一個醜陋的修復，但它的工作原理。

嘗試刪除的CSS過渡，並在事件看，如果你想看到的Chrome failling點擊「徘徊」

感謝Kinlan提交的問題Chrome的團隊之前！

來源

2013-03-05 12:24:23

太棒了！謝謝你的回答！讓我檢查它是否有效！ – 2013-03-05 12:29:07

哦這是一個聰明的解決方案！可能是我會使用它，直到鉻修復錯誤！再次感謝！ :) – 2013-03-05 12:31:15

這是一個移動鉻錯誤。問題隻影響CSS下拉菜單。在css dropodown菜單中，鏈接不是可點擊的。正如這個答案所述，解決方法是使用轉換。您可以閱讀本頁面上的depp css下拉菜單轉換文章http://www.greywyvern.com/?post=337 – 2013-05-14 08:45:03

這似乎是在Android上的Chrome M25的錯誤，我曾提出與工程團隊的問題。按照https://code.google.com/p/chromium/issues/detail?id=180194

來源

2013-03-05 11:57:40 Kinlan

也這麼想！感謝提高票！ – 2013-03-05 12:30:14

我想使這個安東尼·加蒂的答案評論，但我沒有足夠的聲譽：

一個更好的選擇，而不是設置-website-transition-duration是設置-website-transition-delay。

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

來源

2013-12-23 06:12:05

Android版Chrome不尊重的z-index的鏈接點擊

回答

相關問題