JAVASCRIPT

Cursor image not working in ie solved

Cursor image not working in IE ! Why ?

It is possible to attach a cursor image(jpg, png etc.) using css in chrome, firefox and safari. But it doesn’t work in Internet Explorer. This is because mouse cursor is a system level component. Since IE  is Microsoft’s genuine browser it supports the same cursor format as in desktop. That is a (.cur) image format. To fix why Cursor image not working in ie we need to go by procedure that includes a bit javascript and css.

Cursor image not working in ie solved
Cursor image not working in ie solved

First we need to create a div where we can test the change of cursor on mouseover.

Now write some css to make it a hover zone.

Now download your hover image in png format. Note that the image should be in dimension less than 100 x 100 otherwise the cursor won’t take the image. After you download the image, convert it to .cur format. Here is a link to convert the image to .cur format https://convertio.co/jpg-cur/.

Now you have two images, one with .cur and another one with .png format. Finally write a javascript to change the cursor image dynamically according to browser. Following javascript fixes the issue for why Cursor image not working in ie.

Below is the complete code.

Demo for (Cursor image not working in ie)

Share

One Comment

  1. I was very pleased to find this particular web-site.I wanted to thank you for your time with this wonderful learn!! I definitely enjoying every little it and I had you book-marked to see brand-new stuff you writing.
    jordan 6

    Reply

Leave a Comment

Your email address will not be published. Required fields are marked *