El color de fondo no cambia cuando se pasa el cursor por encima (CSS).

Hola chicos, estoy creando algo similar a un mouse personalizado. Quiero que su color sea blanco cuando se sitúe sobre los enlaces.

No sé qué está mal con mi código, no está funcionando correctamente cuando selecciono el elemento padre, pero cuando uso el elemento hijo no funciona. Ayúdenme, me he quedado atrapado con este código durante aproximadamente 4 horas, necesito ayuda.

Aquí está mi código:

<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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';
} )

<!-- language: lang-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;
}

ul li a:hover ~ .cursor {
 background-color: white;
}

<!-- language: lang-html -->
<div class="nav">
    <ul>
        <li><a href="#">Hello</a></li>
    </ul>
</div>

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

<!-- end snippet -->

Solo he pegado el código que escribí, no sé cuál es el problema.