Background color not changing when it's hovered CSS-CodePudding

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 >
        <ul>
            <li><a href="#">Hello</a></li>
           </ul>
    </div>



    <div ></div>
    <div ></div>

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

CodePudding user response：

ul li a:hover ~ .cursor

This CSS selector applies for every element having the class cursor that is preceded by an a element that is hovered.

But in the HTML you provided, the div having the cursor class is preceded by a div having the nav class.

Using CSS, the only solution I can think of is to use this selector :

.nav:hover ~ .cursor

You can add width: min-content; to all li elements to avoid the white background to spread too far.

Note that if the div.cursor is placed immediately after the div.nav in your complete HTML, you should use instead of ~.

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;
  }
  
  .nav:hover ~ .cursor {
    background-color: white;
  }

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



    <div ></div>
    <div ></div>

CodePudding user response：

There are two answers to this question:

1- when you can use ~, that a and <div ></div> in same parent.

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;
  }
 .nav a:hover ~ .cursor {
 background-color: white;
  }

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

2- if you could not change structure of html, you can hover on ul:

.nav:hover ~ .cursor {
  background-color: white;
}

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;
  }
 .nav:hover ~ .cursor {
 background-color: white;
  }

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

<div ></div>
<div ></div>