javascript - icon - Punto de interacción del cursor personalizado-CSS/JQuery
cursor hand css (3)
Cualquiera que sea la herramienta que utilizó para crear el cursor, debe tener una opción para administrar el área de destino del clic. Usted estaría persiguiendo su cola en busca de una solución javascript / css.
Estoy tratando de usar un cursor personalizado para un juego en línea, en este caso es un visor de francotirador.
El problema es que cuando hago referencia al cursor a través de CSS, el punto de interacción sigue siendo la parte superior izquierda del icono, mientras que tiene que ser el punto muerto del icono para que el cursor tenga sentido.
Aquí está el cursor:
cursor:url(http://www.seancannon.com/_test/sniper-scope.cur),default;
Aquí hay una demostración: http://jsfiddle.net/9kNyF/
Si coloca el punto rojo del cursor sobre el punto rojo que creé en la demostración, no activará el evento de clic. Tienes que intentar apuntar hacia la esquina superior izquierda.
Si vuelve a colocar el cursor en el cursor:default; Verá que el evento de clic se dispara bien, solo es cuestión de "apuntar" el cursor.
El juego está codificado en JQuery, así que si necesito agregar algo de lógica allí para el desplazamiento del cursor o algo cojo, que así sea. Idealmente quiero que esto sea una corrección de CSS.
¡Gracias!
En la medida en que no dispare el evento de clic, intente ubicarlo alrededor de su oyente de eventos.
$(function(){
$(''#point'').click(function(){
alert(''clicked point'');
});
});
Con el centrado de la cruz, puede ser más fácil usar un div con el fondo de la imagen y usar jQuery para colocar el div sobre el cursor en el lugar correcto.
<div id="crosshairs"></div>
<script>
$(function(){
$("body").mousemove(function(e){
var CrossHairWidth = $(''#crosshairs'').width();
var CrossHairHeight = $(''#crosshairs'').height();
$(''#crosshairs'').css(''top'', e.pageY - (CrossHairHeight / 2));
$(''#crosshairs'').css(''left'', e.pageX - (CrossHairWidth / 2) );
});
});
</script>
A continuación, oculta el cursor haciendo algo así: cursor: url(http://www.seancannon.com/_test/transparent.png), default;
Solo debe proporcionar la posición <x> y <y> del hotspot en su CSS:
En su ejemplo, el centro es de 24 px desde la parte superior / izquierda (cursor de cursor enorme)
cursor:url(http://www.seancannon.com/_test/sniper-scope.cur) 24 24,default;