CSS Custom Cursor Issue

[Karolina]

Hey everybody,
on my website I want to use a custom cursor (small illustration) and another custom one for the mouseover effect. The problem is, if I use .png (1x and 2x for retina), the cursor image is sharp but I am unable to set the hotspot coordinates to the center. No matter what coordinates I type in, the center stays in the top left corner of the cursor and it sort of "jumps" everytime it hovers over a link.

body {
cursor: url(http://test.de/image1.png) 35 35, auto;
cursor: -webkit-image-set
        (url(http://test.de/image1.png) 1x,
         url(http://test.de/image1.png) 2x ), auto;
}

a {
cursor: url(http://test.de/image2.png) 30 30, auto !important;
cursor: -webkit-image-set
        (url(http://test.de/image2.png) 1x,
         url(http://test.de/image2.png) 2x ), auto !important;
}

If I use .svg, the hotspot coordinates are in the center but the cursor image appears blurry although the .svg contains fixed width and height (not responsive).

body {
cursor: url(http://test.de/image1.svg) 35 35, auto;
}

a {
cursor: url(http://test.de/image2.svg) 30 30, auto !important;
}

Does anyone know how to fix this?

[mariusjopen]

Dear @Karolina
can you post a link?

Best!

Marius

[Karolina]

Hi @mariusjopen
Sure, here you go http://test.girlpunk.de/
Thanks!

[Karolina]

I am using Google Chrome, by the way.

[mariusjopen]

Dear @Karolina
in my Chrome it works.

Mhm…
Yes, nothing we can do about the retina.

Otherwise use a jQuery which makes an image to follow your cursor.

Best!

Marius

[Karolina]

Ah thanks, I'll try that!