Background color not changing when it's hovered CSS

Issue

Hi guys I am creating a custom mouse-like thing, I want its colour to be white when it hovers links IDK what's wrong with my code, it's not working properly when select parent element it works fine but when I use child element it's not working help me out, I got stuck with this code for like 4 hours I need help

Here's my code

const cursor = document.querySelector(".cursor");
const cursor2 = document.querySelector('.cursor2');
document.addEventListener('mousemove',(e) =>{
  cursor.style.left = e.pageX + 'px';
  cursor.style.top =  e.pageY + 'px';
  cursor2.style.left = e.pageX + 'px';
  cursor2.style.top =  e.pageY + 'px';
} )

*{
    cursor: none;
}
body{
    background-color: black;

}
.cursor{
    position: fixed;
    width: 50px;
    height: 50px;
    border: 1px solid #c6c6c6;
    border-radius: 50%;
    left: 0;
    top: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: .12s;
  }
  
  .cursor2{
    position: fixed;
    width: 8px;
    height: 8px;
    background-color: #c6c6c6;
    border-radius: 50%;
    left: 0;
    top: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: .06s;
  }
  ul li a:hover ~ .cursor {
 background-color: white;
  }

<div class="nav">
        <ul>
            <li><a href="#">Hello</a></li>
           </ul>
    </div>



    <div class="cursor"></div>
    <div class="cursor2"></div>

I just pasted whatever code I coded, I don't know what the problem is.

Solution

I found a solution for this, We can use Javascript instead of relying on CSS for this

HTML

<a onmouseenter="onHover()"  onmouseleave="notHover()" href="#">Text<a>

<div class="cursor"></div>
<div class="cursor2"></div>

JS part

const cursor = document.querySelector(".cursor");
const cursor2 = document.querySelector('.cursor2');

document.addEventListener('mousemove',(e) =>{
  cursor.style.left = e.pageX + 'px';
  cursor.style.top =  e.pageY + 'px';
  cursor2.style.left = e.pageX + 'px';
  cursor2.style.top =  e.pageY + 'px';
} )


function onHover(){
  cursor.style.backgroundColor = "white";
  cursor.style.height = "70px";
  cursor.style.width = "70px";
  cursor2.style.backgroundColor = "transparent";
  console.log("hello")
}

function notHover(){
  cursor.style.backgroundColor = "transparent";
  cursor.style.height = "50px";
  cursor.style.width = "50px";
  cursor2.style.backgroundColor = "white";
}

CSS

*{
    cursor: none;
}
body{
    background-color: black;

}
.cursor{
    position: fixed;
    width: 50px;
    height: 50px;
    border: 1px solid #c6c6c6;
    border-radius: 50%;
    left: 0;
    top: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: .12s;
  }
  
  .cursor2{
    position: fixed;
    width: 8px;
    height: 8px;
    background-color: #c6c6c6;
    border-radius: 50%;
    left: 0;
    top: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: .06s;
  }
  
  .nav:hover ~ .cursor {
    background-color: white;
  }

Thanks to the one who helped with this problem I found an alternative way to do this and want to share this with everyone so if anyone is stuck with this. Thank you once again to who helped me

Answered By - S.M Naveen