Chrome no aplicar el estilo CSS vuelo estacionario cuando el botón izquierdo del ratón se mantiene presionado

Question

En Google Chrome, el estado de posición de CSS no se activa cuando el botón izquierdo del ratón se mantiene presionado, como se muestra aquí:

a:hover { 
 
    color: red; 
 
}

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

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

Este problema no se produce, ya sea en FF8 o IE9. Es problemático porque estoy implementando una acción de arrastrar y soltar y uso de CSS para resaltar el objetivo de colocación. Podría hacer esto de manera bastante trivial en JavaScript, pero eso parece ser una tarea difícil para lo que es esencialmente un problema de CSS. ¿Hay alguna solución para esto?

Answer 1

El enlace se vuelve rojo cuando lo paso sobre el mouse usando Chrome 17.0.948.0 (Developer Build 111321) Ubuntu 10.04, por lo que es posible que desee actualizar su Chrome. En una nota relacionada, la pseudoclase de flotación se aplica a un elemento que está HABILITADO por un puntero del mouse. Para que se aplique un estilo mientras se mantiene presionado el botón del mouse mientras se hace clic en el vínculo, use la pseudoclase activa. No estoy seguro de por qué FF e IE se comportan de manera diferente.

Answer 2

Cuando el botón izquierdo del mouse está desactivado, ¿no se supone que el elemento está en estado activo? La diferencia aquí es que Firefox e IE permiten que el estado activo se herede del estado de desplazamiento, y Chrome no. En CSS, el estado activo se puede controlar usando: pseudoclase activa. Debe establecer explícitamente el estilo para el estado activo para garantizar la coherencia entre los navegadores.

Answer 3

Revisé en Safari y Opera también y se comportan como IE9 y Firefox. Parece que Chrome es el único navegador que se comporta de esta manera. La única forma en que pude obtener el comportamiento deseado fue usando Javascript. Las sugerencias con: pseudo clase activa definitivamente no funcionan, creo que malinterpretan el problema. Extrañamente: el deslizamiento en Chrome funciona cuando se mantiene presionado el botón derecho del mouse y no cuando está el botón izquierdo. Imagínate.

Answer 4

Usted busca la: pseudo-clase activa. : el control deslizante solo se activará cuando el mouse sobrepase el nodo. : active solo se activará cuando se haya seleccionado o hecho clic en el nodo.

Aquí está la jsFiddle: http://jsfiddle.net/RHGG6/21/

Answer 5

De un poco de juego alrededor, parece que Chrome 30.0.1599.69 m en windows7 no genera un evento MouseEnter si el botón izquierdo se lleva a cabo cuando se mueve sobre un elemento. Como tal, confiar en el evento onmouseenter da el mismo resultado que usar css: quizás este evento (no activado) se use para señalar al motor css que algo necesita cambiar.

De todos modos, puede agregar código para manejar eventos mousemove y mouseout. Simplemente configuré el color del texto con el js, aunque algo que alteró una clase probablemente sería una mejor opción. Al menos el js usará el tiempo que el css debería haber estado usando, por lo que no estará todo sobrecargado, aunque sí lo rehace todo cada vez que se mueve el mouse.

Quizás podría usar removeEventListener desde el controlador que está tratando de eliminar. De ser así, podría adjuntar el js para manejar los eventos con addEventListener, uniéndolos a ambos eventos en la carga de la página. Cuando se desencadena el evento onmousemove, puede cambiar el estilo y luego quitar el controlador. Luego, cuando se active el evento de mouseout, puede restaurar el estilo y volver a conectar el controlador onmove. No me sorprendería si al intentar eliminar un controlador de un evento, desde el propio controlador fallara, pero solo se puede intentar.Solo agregaría unos pocos bytes al js, pero mejoraría tremendamente la eficiencia (en términos del enlace, no de toda la página), desde potencialmente muy pobre si el mouse se movió sobre el enlace hasta el 100%, es decir, el estilo se establece exactamente una vez y se borra exactamente una vez por ciclo de entrada/salida.

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

Trabaja para mí - Nota: solo probado con Chrome en win7.