xxxxxxxxxx
div
{
/* I WANT TO CENTER MY CURSOR (size = 60px / 40px) */
cursor: url(http://custom-cursor.png) 30 20, auto;
}
xxxxxxxxxx
/* Keyword value */
cursor: auto;
cursor: pointer;
/* more at: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#keyword
/* … */
cursor: zoom-out;
/* URL with mandatory keyword fallback */
cursor: url(hand.cur), pointer;
/* URL and coordinates, with mandatory keyword fallback */
cursor: url(cursor_1.png) 4 12, auto;
cursor: url(cursor_2.png) 2 2, pointer;
/* URLs and fallback URLs (some with coordinates), with mandatory keyword fallback */
cursor: url(cursor_1.svg) 4 5, url(cursor_2.svg), /* … ,*/ url(cursor_n.cur) 5 5,
progress;
/* Global values */
cursor: inherit;
cursor: initial;
cursor: revert;
cursor: revert-layer;
cursor: unset;
xxxxxxxxxx
const [cursorPosition, setCursorPosition] = useState({ top: 0, left: 0 })
const onMouseMove = e =>
setCursorPosition({ top: e.screenY, left: e.screenX });
return <div onMouseMove={onMouseMove} >
<div style={{position: 'absolute', cursorPosition }} />
</div>
xxxxxxxxxx
body {
/*(Cursor image must be 32*32 pixles)*/
cursor: url(CURSOR_URL), auto;
}