I am currently working with React and Next.js.
I am trying to hide the pointer using cursor: none.
Even though I used cursor: none, the pointer is still visible.
const Home: FunctionComponent = () => {
const [mouseX, setMouseX] = useState(0);
const [mouseY, setMouseY] = useState(0);
const Mouse = (e: any) => {
setMouseX(e.clientX);
setMouseY(e.clientY);
};
return (
<>
<div
style={{
position: 'absolute',
top: mouseY,
left: mouseX,
height: '20px',
width: '20px',
background: 'linear-gradient(to right, #aed0ee 0%, #00f2fe 100%)',
cursor: 'none',
}}
></div>
<div
style={{ width: '1000px', height: '1000px' }}
onMouseMove={(e) => Mouse(e)}
></div>
</>
);
};
export default Home;