Chrome non si applica css stile hover quando il pulsante sinistro del mouse è premuto

Question

In Google Chrome, lo Stato CSS hover non viene attivato quando il pulsante sinistro del mouse è premuto, come illustrato di seguito:

a:hover { 
 
    color: red; 
 
}

<a href="http://www.jsfiddle.net">words</a>

http://jsfiddle.net/RHGG6/1/

Questo problema non si verifica in entrambi i FF8 o IE9. È problematico perché sto implementando un'azione drag-and-drop e utilizzando i CSS per evidenziare il drop target. Potrei farlo in modo abbastanza banale in JavaScript, ma ciò sembra pesante per quello che è essenzialmente un problema CSS. Ci sono soluzioni alternative a questo?

Answer 1

Il collegamento diventa rosso quando eseguo il passaggio del mouse utilizzando Chrome 17.0.948.0 (Developer Build 111321) Ubuntu 10.04, quindi è possibile che si desideri aggiornare Chrome. Su una nota correlata, la pseudo-classe: hover si applica a un elemento che viene HOVERED da un puntatore del mouse. Per applicare uno stile mentre il pulsante del mouse viene tenuto premuto mentre si fa clic sul collegamento, utilizzare la pseudo-classe: active. Non sono sicuro del perché FF e IE si comportino diversamente.

Answer 2

Quando si lascia il pulsante del mouse premuto, l'elemento non dovrebbe essere nello stato attivo? La differenza qui è che Firefox e IE stanno permettendo che lo stato attivo sia ereditato dallo stato di hover e Chrome no. Nei CSS, lo stato attivo può essere controllato usando la pseudo-classe: active. È necessario impostare in modo esplicito lo stile per lo stato attivo per garantire la coerenza tra i browser.

Answer 3

Ho controllato anche Safari e Opera e si comportano proprio come IE9 e Firefox. Sembra che Chrome sia l'unico browser che si comporta in questo modo. L'unico modo in cui ero in grado di ottenere il comportamento desiderato era usare Javascript. I suggerimenti con la pseudo classe attiva sicuramente non funzionano, penso che abbiano frainteso il problema. Stranamente: il passaggio del mouse in Chrome funziona quando si tiene premuto il pulsante destro del mouse e non quando si trova il pulsante sinistro. Vai a capire.

Answer 4

Stai cercando la: pseudo-classe attiva. : hover si attiverà solo quando il nodo viene spostato dal mouse. : active si attiva solo quando il nodo è stato selezionato o cliccato.

Ecco il jsFiddle: http://jsfiddle.net/RHGG6/21/

Answer 5

Da un po 'di suonare in giro, sembra che Chrome 30.0.1599.69 m su Windows7 non genera un evento MouseEnter se il pulsante sinistro si tiene quando si sposta sopra un elemento. Come tale, affidarsi all'evento onmouseenter dà lo stesso risultato dell'uso di css - forse questo evento (non innescato) viene usato per segnalare al motore css che qualcosa deve cambiare.

In ogni caso, è sufficiente aggiungere codice per gestire gli eventi mousemove e mouseout. Ho semplicemente impostato il colore del testo con il js, anche se qualcosa che ha attivato una classe sarebbe probabilmente una scelta migliore. Almeno il js userà il tempo che il css avrebbe dovuto usare, quindi non sarà tutto sovraccarico, anche se fa schifo rifarlo tutto in qualsiasi momento il mouse si muove.

Forse potresti usare removeEventListener dall'interno del gestore che stai cercando di rimuovere. In tal caso, è possibile allegare js per gestire gli eventi con addEventListener, collegandosi a entrambi gli eventi al caricamento della pagina. Quando è stato attivato l'evento onmousemove, è possibile modificare lo stile e quindi rimuovere il gestore. Quindi, quando è stato attivato l'evento mouseout, è possibile ripristinare lo stile e ricollegare il gestore onmove. Non sarei sorpreso se provare a rimuovere un gestore da un evento, dall'interno del gestore stesso fallirebbe, ma si può solo provare.Aggiungeva solo pochi byte al js, ma migliorava enormemente l'efficienza (in termini di link, non dell'intera pagina) - da potenzialmente molto povero se il mouse veniva spostato sul link molto al 100% - cioè lo stile viene impostato esattamente una volta e cancellato esattamente una volta per ciclo di inserimento/partenza.

<a href="http://www.jsfiddle.net" onmousemove = "this.style.color='red'" onmouseout = "this.style.color=''">words</a> 

Funziona per me - Nota: testato solo con chrome in win7.