Custom cursor always behind elements. How to solve this? - css

Question

I have created a custom cursor in my NextJS application like this:
import { useEffect, useState } from "react";
import { motion } from "framer-motion";
export default function Cursor(props: any) {
const [position, setPosition] = useState({ x: 0, y: 0 });
useEffect(() => {
const mouseMove = (e: any) => {
setPosition({ x: e.clientX, y: e.clientY });
};
window.addEventListener("mousemove", mouseMove);
return () => {
window.removeEventListener("mousemove", mouseMove);
};
}, []);
const variants = {
default: {
x: position.x - 16,
y: position.y - 16,
backgroundColor: "#fff",
},
text: {
height: 150,
width: 150,
x: position.x - 75,
y: position.y - 75,
backgroundColor: "#fff",
},
};
return (
<motion.div
variants={variants}
animate={props.cursorVariant}
className="h-[32px] w-[32px] rounded-full fixed top-0 left-0"
/>
);
}
and added it to my index.tsx file as follows:
import HeadTag from "../components/HeadTag";
import Navbar from "../components/Navbar";
import Landing from "../components/Landing";
import AboutMe from "../components/AboutMe";
import Divider from "../components/Divider";
import Projects from "../components/Projects";
import Footer from "../components/Footer";
import ParticleComponent from "../components/Particles";
import Cursor from "../components/Cursor";
import { useState } from "react";
export default function Home() {
const [cursorVariant, setCursorVariant] = useState("default");
return (
<>
<HeadTag />
<div
style={{ scrollBehavior: "smooth" }}
className="select-none bg-slate-900 w-full overflow-x-hidden flex flex-col items-center"
>
<Cursor cursorVariant={cursorVariant}/>
<ParticleComponent />
<Navbar />
<Landing setCursorVariant={setCursorVariant}/>
<AboutMe />
<Divider />
<Projects />
<Divider />
<Footer />
</div>
</>
);
}
Everything works fine regarding the styling and functions of the cursor but when I hover over elements like e.g. my Navbar Toggle, the cursor in in the background of that element and isn't visible anymore.
I have already tried giving the Div element of the cursor a higher z-index than the elements I want to hover over but this in not changing anything...
My global.css looks like this to prevent the default cursor from showing up:
#tailwind base;
#tailwind components;
#tailwind utilities;
* { cursor: none;}
Anyone has a tip for me how to solve this problem? :)
Thanks a lot!