puntero - CSS personalizado de la imagen del cursor

modificar puntero css

Question

Tengo varias imágenes de héroes, que tienen una ventana emergente modal al hacer clic. Intento que mi cursor se convierta en lupa cada vez que se mueve sobre la imagen. El siguiente CSS no parece funcionar aunque mi magnify.cur esté presente en la ubicación correcta.

a.heroshot img {
cursor:url(/img/magnify.cur), pointer;
}

¿Alguien ha hecho algo similar? No me importa una solución de JavaScript, si existe.

EDITAR : Funciona en Safari, pero no en Firefox.

Answer 1

¿Qué pasa si encierras la cadena de url con apostrohes?

a.heroshot img {
cursor:url(''/img/magnify.cur''), pointer;
}

Ver también http://www.w3schools.com/CSS/pr_class_cursor.asp

Answer 2

(Basado en la respuesta de Kevin Borders)

La orden de reserva correcta es la siguiente

a.heroshot img {
cursor: url(/img/zoom_in.png), url(/img/zoom_in.cur), pointer;
cursor: url(/img/zoom_in.png), -moz-zoom-in;
cursor: url(/img/zoom_in.png), -webkit-zoom-in;
}

Probado con: Firefox 47, Chrome 51, Opera 36, ​​Edge 13 e IE11.

Answer 3

Esto hizo el truco :)

a.heroshot img {
cursor:url(/img/layout/backgrounds/moz-zoom.gif), -moz-zoom-in;
}

Answer 4

La propiedad My url de mi lado está trabajando para el cursor de la siguiente manera

 #myid{cursor:url(''myimage.png'') , auto}

Pero aquí creo que el problema del tamaño de la imagen. Porque si uso un tamaño de 32 * 32 o inferior, entonces esto funciona perfectamente.

Una lista de URL separadas por comas a cursores personalizados. Nota: siempre especifique un cursor genérico al final de la lista, en caso de que no se pueda usar ninguno de los cursores definidos por URL.

 #myid{cursor:url(''myimage.png'') , auto}
#myid{cursor:url(''myimage.png'') ,url(''myimage2.gif'') , auto} etc

Si pones solo esto, entonces no funcionará

 #myid{cursor:url(''myimage.png'')}

Answer 5

Su problema puede ser que las URL del cursor no funcionen en Firefox para Mac.

Puede obtener el mismo efecto en Firefox utilizando la palabra clave -moz-zoom-in .

cursor:url(/img/magnify.cur), -moz-zoom-in, auto;

Esto mostrará magnify.cur, el cursor de zoom específico de Mozilla o un cursor predeterminado del sistema. Se utiliza el primer cursor en la lista compatible con el navegador.

También puede ver una lista de palabras clave de cursor compatibles con diferentes navegadores.

Answer 6

ACTUALIZACIÓN: el ícono de ampliación ahora es compatible de forma nativa en la mayoría de los navegadores, por lo que puede usar este CSS:

cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in;