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.