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.

related http://stackoverflow.com/questions/6577326/cross-browser-custom-cursor-style — Adriano, Jun 24 '13 at 21:54

score 36 · Accepted Answer · answered Dec 03 '08 at 14:23

36

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.

answered Dec 03 '08 at 14:23

isani

418
4
6

3

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](https://developer.mozilla.org/en/Using_URL_values_for_the_cursor_property) defines the syntax for this rule, which is `[,]* keyword`, `keyword` being one of the CSS defined cursor values, such as `auto`. – pau.moreno Oct 17 '11 at 14:29

score 9 · Answer 2 · answered Dec 08 '08 at 17:12

9

This did the trick :)

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

answered Dec 08 '08 at 17:12

Chris J Allen

18,970
20
76
114

Kevin Borders · Answer 3 · 2014-10-12T14:02:48.470

7

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;

edited Oct 12 '14 at 14:02

answered May 30 '13 at 16:10

Kevin Borders

2,933
27
32

Would be nice to put semicolons at the end of your property definition. – Volker E. Oct 12 '14 at 00:44

score 2 · Answer 4 · answered Dec 03 '08 at 12:12

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

answered Dec 03 '08 at 12:12

activout.se

6,058
4
27
37

4

The quote marks in a URL CSS property are optional [http://www.w3.org/TR/CSS21/syndata.html#uri] and w3schools is a terrible resource as it's full of misleading, nonstandard information and errors. – Gareth Dec 03 '08 at 12:25

SandroMarques · Answer 5 · 2016-06-20T22:06:01.903

2

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

edited Jun 20 '16 at 22:06

answered Jun 20 '16 at 21:24

SandroMarques

6,070
1
41
46

score 0 · Answer 6 · edited Oct 12 '14 at 00:45

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

Custom Cursor Image CSS

6 Answers6

Linked

Related