here is my complete code i want when user hover on text a specific text area is showing to look like my image desire i am trying this code but not working

@import url(‘https://fonts.googleapis.com/css2?family=Red+Rose:wght@300;700&display=swap’);
body {
background-color: #000;
}

.cursor.hover {
transform: translate(-50%, -50%);
height: 180px;
width: 180px;
transition: width 0.1s linear, height 0.1s linear;
}

.cursor{
height: 180px;
width: 180px;
border-radius: 50%;
position: fixed;
transform: translate(-50%, -50%);
pointer-events: none;
}

body:has(a:hover) .cursor{
transform: translate(-50%, -50%);
height: 180px;
width: 180px;
transition: width 0.1s linear, height 0.1s linear;
background: radial-gradient(103.65% 103.65% at 50% 50%, rgba(182, 255, 221, 0.9) 28.5%, rgba(0, 0, 0, 0) 100%);
mix-blend-mode: hard-light;
}
a {
font-size: 24px;
font-weight: 500;
text-transform: none;
font-style: normal;
text-decoration: none;
line-height: 30px;
color: #2BB87F;
}

Our collaboration enabled LaunchGood to amplify its impact, drive community engagement, and inspire positive change globally. These achievements underscore the transformative potential of crowdfunding as a catalyst for meaningful social impact, and we are proud to have contributed to LaunchGood’s journey of making a difference in the world.

const cursor = document.querySelector(“.cursor”);

window.addEventListener(“mousemove”, (e) => {

let x = e.pageX – window.scrollX;
let y = e.pageY – window.scrollY;

cursor.style.left = `${x}px`;
cursor.style.top = `${y}px`;
});