Así que tengo una configuración simple de un div #container, que contiene un #field div. También tengo un intervalo de #superficie invisible que sigue el movimiento del mouse (centrado) y se hace visible al pasar sobre #field.
HTML:
<body>
<div id="container" >
<div id="field"></div>
</div>
<span id="mouseHover" ></span>
</body>
JS:
$("#field").on({
mousemove: function (e) {
var left = parseInt($("#container").css("left")) || 0;
var top = parseInt($("#container").css("top")) || 0;
var newX = e.pageX - left - parseInt($("#mouseHover").css("width")) / 2;
var newY = e.pageY - top - parseInt($("#mouseHover").css("height")) / 2;
$("#mouseHover").css({ left: newX, top: newY });
console.log("MMove");
},
mouseenter: function(e){
$("#mouseHover").show();
console.log("MEnter");
},
mouseleave: function(e){
$("#mouseHover").hide();;
console.log("MLeave");
}
});
Sin embargo, cuando se desplaza sobre el campo, se dispara.innumerables eventos mouseenter y mouseleave (+ mousemove previsto) tan pronto como muevo el mouse. Este parece ser el caso porque el #hover span está centrado alrededor del mouse y cada vez que muevo el mouse técnicamente, dejo #field y entro en #hover, y luego dejo #hover e ingresé #field una y otra vez, dando como resultado #hover Para mostrar y ocultar continuamente.
Una solución que tengo es no centrar el # desplazamiento alrededor del mouse, para que el mouse no toque los límites del tramo y, por lo tanto, no salga de #field. Pero quiero que esté centrado ^^
La otra es darle al intervalo un índice z negativo, que no es una solución real porque el #cubierto desaparece detrás del campo # tan pronto como obtiene un color de fondo.
JSFiddle con el problema (#hover está "parpadeando" cuando está centrado alrededor del mouse)
¿Cuál sería el enfoque correcto aquí :)?
Respuestas
4 para la respuesta № 1Intenta dar el #mouseHover elemento a pointer-events Propiedad CSS valor de "ninguno". Aquí hay una JSFiddle actualizado.
#mouseHover {
// ...
pointer-events: none;
}
0 para la respuesta № 2
Una solución que tengo es no centrar el # desplazamiento alrededor del mouse, para que el mouse no toque los límites del tramo y, por lo tanto, no salga de #field.
Ese que podrías lograr fácilmente en navegadores modernos, usando pointer-events para hacerlo "intocable" por el cursor del mouse:
#mouseHover {
pointer-events: none;
}
https://jsfiddle.net/6rauo9ba/3/
Eso, por supuesto, solo será una solución, si no necesita interactuar con el contenido dentro de la #mouseHover elemento de ninguna manera.
Y es posible que desee verificar el soporte del navegador, para ver para qué navegadores antiguos podría necesitar una solución alternativa. http://caniuse.com/#feat=pointer-events