html - 悬停CSS时背景颜色不会改变

Question

大家好，我正在创建一个自定义的类似鼠标的东西，我希望它悬停在链接上时颜色为白色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

这是我的代码

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>

我只是粘贴了我编码的任何代码，我不知道问题出在哪里。

Answer 1

ul li a:hover ~ .cursor

此 CSS 选择器适用于具有类 cursor 且前面有悬停的 a 元素的每个元素。

但在您提供的 HTML 中，具有 cursor 类的 div 前面是具有 nav div类。

使用 CSS，我能想到的唯一解决方案是使用这个选择器:

.nav:hover ~ .cursor

您可以将 width: min-content; 添加到所有 li 元素，以避免白色背景扩散得太远。

请注意，如果 div.cursor 在您的完整 HTML 中紧跟在 div.nav 之后，您应该使用 + 而不是~。

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



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