para - Chrome no aplicará el estilo css hover cuando se mantenga presionado el botón izquierdo del ratón
selectores css (6)
En Google Chrome, el estado de activación de CSS no se activa cuando se presiona el botón izquierdo del mouse, como se muestra aquí:
a:hover {
color: red;
}
<a href="http://www.jsfiddle.net">words</a>
Este problema no ocurre ni en FF8 ni en IE9. Es problemático porque estoy implementando una acción de arrastrar y soltar y usando CSS para resaltar el objetivo de soltar. Podría hacer esto de forma bastante trivial en JavaScript, pero eso parece ser un problema para lo que es esencialmente un problema de CSS. ¿Hay alguna solución a esto?
Al jugar un poco, parece que Chrome 30.0.1599.69 m en windows7 no genera un evento de mouseenter si se mantiene presionado el botón izquierdo 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 desencadenado) se usa para indicar al motor css que algo debe cambiar.
De todos modos, puedes agregar código para manejar los eventos mousemove y mouseout. Simplemente establezco el color del texto con el js, aunque algo que alternar una clase probablemente sería una mejor opción. Al menos el js estará usando el tiempo que el css debería haber estado usando, por lo que no será una sobrecarga, a pesar de que apesta rehacerlo todo cada vez que se mueve el mouse.
Quizás podría usar removeEventListener desde el controlador que intenta eliminar. Si es así, podría adjuntar el js para manejar los eventos con addEventListener, adjuntando a ambos eventos en la carga de la página. Cuando se activó el evento onmousemove, podría cambiar el estilo y luego eliminar el controlador. Luego, cuando se activó el evento mouseout, podría restaurar el estilo y volver a adjuntar el controlador onmove. No me sorprendería si el intento de eliminar un controlador de un evento, desde dentro del mismo controlador fallaría, pero solo se puede intentar. Solo agregaría unos pocos bytes a la js, pero mejoraría la eficiencia (en términos del enlace, no de toda la página) tremendamente - potencialmente muy pobre si el mouse se moviera mucho sobre el enlace al 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>
Funciona para mí. Nota: solo se ha probado con Chrome en Win7.
Cuando se deja presionado el botón del mouse, ¿no se supone que el elemento está en el 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 mediante la pseudo-clase: active. Debe establecer explícitamente el estilo para el estado activo para garantizar la coherencia entre los navegadores.
El enlace se vuelve rojo cuando lo muevo con 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 pseudo-clase: hover se aplica a un elemento que está ENCENDIDO por un puntero del mouse. Para aplicar un estilo mientras se mantiene presionado el botón del mouse mientras se hace clic en el enlace, use la pseudo-clase: active. No estoy seguro de por qué FF e IE se comportan de manera diferente.
Estás buscando la pseudo-clase activa. : hover solo se activará cuando el mouse pase el ratón sobre el nodo. : activo solo se activará cuando se haya seleccionado o se haya hecho clic en el nodo.
Aquí está el jsFiddle: http://jsfiddle.net/RHGG6/21/
Hoy en día (2018), mientras el error persiste en Chrome, puede dragenter dragleave eventos de arrastrar y soltar de dragenter y los eventos de dragleave . Si tiene un elemento dom anidado, puede aplicar un contador para mitigar los eventos de dragleave que se producen cuando el mouse supera un elemento secundario.
var h1 = document.querySelector(''h1'')
var counter = 0
h1.ondragenter = _=> ++counter && h1.classList.add(''dragover'')
h1.ondragleave = _=> --counter || h1.classList.remove(''dragover'')
span { font-style:italic }
h1:hover { color:red }
h1.dragover { color:blue }
h1,h2 { display:inline }
<h1>hover over me<span>, and me</span></h1>
<br>
<h2 draggable=true>drag me</h2>
También verifiqué Safari y Opera 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 la: pseudo clase activa definitivamente no funcionan, creo que no entienden el problema. Extrañamente,: hover en Chrome funciona cuando se mantiene presionado el botón derecho del mouse y no cuando está el botón izquierdo. Imagínate.