2013-03-05 14 views
5

HTMLChrome su Android non rispettando z-index per il link scatta esempio

<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;} 

di lavoro: http://jsfiddle.net/DemjR/6/

ho creato menù hover CSS sul sopra l'esempio (nel link) e stranamente non funziona come si suppone in chrome (v 25.0.13 64.123) nei dispositivi Android. ma funziona correttamente in tutti gli altri dispositivi che ho provato in (ios, windows, mac ecc.)

Il problema è (in Android): Quando si passa il mouse sulla casella nera appare un div grigio che ha un collegamento (google.com) in esso.

Quando si fa clic su questo link in realtà innesca sul link dietro (yahoo.com) e non (google.com)

Si tratta di un bug di cromo nei dispositivi Android?

Grazie in anticipo

+0

Testato su HTC Desire 4.1 ROM personalizzata con il browser di default, e le opere. Tuttavia, come dovremmo spostare il div sui dispositivi? Ha funzionato facendo clic su di esso per me. – Bigood

+0

si tocca il div e si innescherà l'evento hover. –

risposta

2

Chrome, in questo caso è il tipo di attivazione del mouseOUT prima del clic!

Ecco un altro violino che mostra gli eventi al passaggio del mouse su DIV così come gli eventi Click ai link:

http://fiddle.jshell.net/gnv9n/18/ < - questo dovrebbe funzionare su tutti i browser. Viene utilizzata solo la transizione webkit perché il problema si verifica solo su Chrome.

Se si aggiunge una transizione css3, il clic viene attivato correttamente! Questa è una specie di brutta soluzione ma funziona.

tenta di rimuovere la transizione css e guardare gli eventi, se volete vedere Chrome failling cliccare prima "in bilico"

Grazie Kinlan per la presentazione della questione alla squadra di Chrome!

+0

Ottimo! grazie per la tua risposta! fammi controllare se funziona! –

+0

Ohh Questa è una soluzione intelligente! Forse lo userò finché Chrome non risolverà il bug! grazie ancora! :) –

+0

Questo è un bug di Chrome per dispositivi mobili. Il problema riguarda solo il menu a discesa css. In un menu a cascata i link non sono cliccabili. Come affermato da questa risposta, una soluzione alternativa è utilizzare la transizione.Puoi leggere un articolo di transizione nel menu a discesa di depp css in questa pagina http://www.greywyvern.com/?post=337 –

0

ho voluto fare questo un commento alla risposta di Anthony Gatti, ma io non ho abbastanza reputazione:

una scelta migliore rispetto per impostare -website-transition-duration è quello di impostare -website-transition-delay.

Esempio: http://fiddle.jshell.net/gnv9n/28/

Problemi correlati