Custom Cursor Image CSS

Question

I have a number of heroshot images, that have a modal popup when clicked. I'm trying to get my cursor to turn into magnifying glass whenever it is moved over the image. The following CSS does not appear to work even though my magnify.cur is present in the right location.

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

Has anyone ever done anything similar? I don't mind a JavaScript solution if one exists.

EDIT: It works in Safari, but not in Firefox.

Answer 1

Your problem may be that cursor URLs don't work in Firefox for the Mac.

You can get the same effect on Firefox by using the -moz-zoom-in keyword.

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

This will show magnify.cur, the Mozilla-specific zoom cursor or a system default cursor. The first cursor on the list that the browser supports is used.

You can also see a list of cursor keywords supported by different browsers.

Answer 2

What if you enclose the url string with apostrohes?

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

See also http://www.w3schools.com/CSS/pr_class_cursor.asp

Answer 3

UPDATE: The magnify icon is now supported natively in most browsers, so you can just use this CSS:

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

Answer 4

My side url property is working for cursor in following way

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

But here I think image size issue. Because If I use 32*32 size or below this then this work perfectly.

A comma separated list of URLs to custom cursors. Note: Always specify a generic cursor at the end of the list, in case none of the URL-defined cursors can be used

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

If you put only this then it will not work

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

Answer 5

This did the trick :)

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

Answer 6

(Based on Kevin Borders response)

The right fallback order is the following

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;
}

Tested with: Firefox 47, Chrome 51, Opera 36, Edge 13 and IE11.