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.

Mounting

related #6577826 – Pisciform

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.

At

This rule doesn't work on Firefox (tested with FF7). The browser sees it as a syntax error and discards the rule (can be seen on the web Console). Chrome doesn't show the custom icon as well (IE8 displays the custom icon). MDN defines the syntax for this rule, which is [<url>,]* keyword, keyword being one of the CSS defined cursor values, such as auto. – Blastocoel

Answer 2

This did the trick :)

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

Mounting

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;

Hammad

Would be nice to put semicolons at the end of your property definition. – Mindexpanding

Answer 4

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

Maye

The quote marks in a URL CSS property are optional [w3.org/TR/CSS21/syndata.html#uri] and w3schools is a terrible resource as it's full of misleading, nonstandard information and errors. – Lifton

Answer 5

(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.

Weatherspoon

Answer 6

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')}

Felicio