Cross browser custom cursor style

Question

I display a world map by an img tag. I associate an image map with it to hyperlink some regions. I overlay a bordered box div indicating a certain region can be clicked and zoomed.

Now to show the user it does this I want the cursor to change to a magnifying glass shape. I looked through the web and found something that works in firefox and ie6-8:

#zoomregion:hover { cursor: url('templates/test/styles/images/magnify.cur'), -moz-zoom-in; }

Unfortunately opera,chrome and ie9 ignore it and show the default (i.e.: pointer). How can I use cross browser custom cursor icons?

Airspace

A cheap way to do it would be to add an extra element to the page with the new cursor image you want, use JavaScript to always position it at the mouse, and use CSS to hide the real cursor. But you're probably not interested in doing it that way. – Suh

I think that would keep click events from getting where they're supposed to go. – Salutatory

And you're sure the image is at templates/test/styles/images/magnify.cur ? – Salutatory

beradrian.wordpress.com/2008/01/08/… should help you in this. – Diaspora

I read about offering 2 uri notations. One with a path relative to the css file and a fallback relative to the html file. This fixed it. – Airspace

Yes but there are browser differences. It is explained in detail on the site Drazisil linked in his answer. – Airspace

@Johan you don't need the :hover pseudo selector for your case. – Synsepalous

#zoomregion:hover { cursor: url(cursor.cur),url(cursor/cursor.cur),default; } – Cesya

related css-tricks.com/almanac/properties/c/cursor – Cesya

related caniuse.com/#search=cursor and also developer.mozilla.org/en-US/docs/Web/CSS/cursor – Cesya

according to developer.mozilla.org you must also put a keyword in the end; which may greatly improve browser compatibility over -moz-zoom-in. – Lorica

Answer 1

The -moz- part of the -moz-zoom-in; means that it's for Mozilla only, to make it cross browser, you need all of the tags in the same id tag css:

#zoomregion:hover { 
    cursor: url('templates/test/styles/images/magnify.cur');
    -webkit-zoom-in;
    -moz-zoom-in;
    -ie-zoom-in;
    -ms-zoom-in;
    -o-zoom-in;
}

-webkit- accounts for a lot of browsers, including mobile (which, for this use, it's probably not needed) which is very useful and shortens things a lot.

Hickman

Are you sure about this vendor prefixes and rules? – Utmost

I posted this 2 years ago, I have no recollection of even posting this answer. However, If there was a mistake in this, I would have bee caught a long time ago. That or this solution is deprecated. However, I have no idea. – Hickman

It does not matter if it was posted 2 years ago, you still can edit it correctly, also because it is constantly searched and it is always possible to down vote it. And the mistake here is that I have never heard about a vendor prefix called -ie- neither is possible that rules in CSS have just the vendor prefix without any specifications. – Utmost

Well, when this was posted -ie- was used for Internet Explorer, but if it has been replaced, then I would be happy to fix it once I find out by what it was replaced. – Hickman

That's not true, prefixer -ie- has never been existed: check for example this article divi.space/divi-tutorials/browser-prefixes-explained posted in 2015 well before this answer. And then again, CSS rules like you have applied (-webkit-zoom-in; -moz-zoom-in; ...) are totally incorrect in syntax: check for example w3schools.com/css/css_syntax.asp on how to structure a CSS rule. – Utmost

Check also this other question from 2011 that links directly to the W3C docs https://mcmap.net/q/56143/-list-of-css-vendor-prefixes – Utmost

Well, then I have no idea what I'm doing. If you know so much, I encourage you to post your own answer. Since I clearly am unfamiliar with this topic, I, too, need a thorough and accurate answer. Evidently, you are quite experienced in the field, so I elect you to write one. It would be beneficial to everyone since, as you said, it is constantly searched. – Hickman

The problem is that there is not a real cross-browser solution for the original question yet. I have tried different solution but none is working or at least, nowadays, none is supporting old IE versions but supporting every other browsers. – Utmost