Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Custom cursor image doesn't work in all IEs?

I think I have tried different methods suggested all over the internet but nothing worked. This is my current css code:

div {
   cursor: url(images/zoomin.cur), auto;
}

It works fine except in IE...

like image 564
jilseego Avatar asked Sep 14 '11 15:09

jilseego


People also ask

How do I get a custom cursor for everything?

Customizing cursors Step 1: Navigate to the Mouse properties window as we did earlier. Step 2: Select the Pointers tab. Step 3: To select a custom cursor for the highlighted individual icon, click Browse. Step 4: That will open the default cursors folder, where hundreds of different cursor options are available.


2 Answers

Unfortunately, cursor is plain buggy in IE, at least until and including 8

In Internet Explorer for Windows up to and including version 8, if a relative URI value is specified in an external style sheet file the base URI is considered to be the URI of the document containing the element and not the URI of the style sheet in which the declaration appears.

http://reference.sitepoint.com/css/cursor

You may want be able to use a conditional comment to target IE and then feed it a modified style rule with a different url.

like image 92
Jason Gennaro Avatar answered Oct 03 '22 22:10

Jason Gennaro


I solved in this way for the grab cursor in Internet Explorer, citing the @JasonGennaro's answer:

In Internet Explorer for Windows up to and including version 8, if a relative URI value is specified in an external style sheet file the base URI is considered to be the URI of the document containing the element and not the URI of the style sheet in which the declaration appears.

.grab_cursor {
    cursor: grab !important; /*Without !important the .cur-file property below will overwrite this and browser will show default cursor*/
    cursor: -moz-grab !important;
    cursor: -webkit-grab !important;
    cursor: url('../img/cursors/openhand.cur'), url('img/cursors/openhand.cur'), n-resize; /* standard: note the different path for the .cur file */
    cursor: url('img/cursors/openhand.cur'), n-resize\9; /* IE 8 and below */
    *cursor: url('img/cursors/openhand.cur'), n-resize; /* IE 7 and below */
    _cursor: url('img/cursors/openhand.cur'), n-resize; /* IE 6 */
}

Files tree:

index.html
css/style.css -> here the posted code
img/cursors/openhand.cur

Good references:

  • One
  • Two
  • Three

Working Demo:

  • Demo
like image 40
Riccardo Volpe Avatar answered Oct 03 '22 20:10

Riccardo Volpe