悬停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 元素中，以避免白色背景扩散得太远。

请注意，如果在完整的 HTML 中 div.cursor 紧跟在 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>

Answer 2

这个问题有两个答案：

1- 当您可以使用~ 时，即a 和<div class="cursor"></div> 在同一个父级中。

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

2- 如果您无法更改 html 的结构，您可以将鼠标悬停在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 class="nav">
        <ul>
            <li>
            <a href="#">Hello</a>
            </li>
        </ul>
</div>

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

    

Answer 3

我找到了一个解决方案，我们可以使用 Javascript 而不是依赖 CSS 来解决这个问题

HTML

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

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

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';
} )


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;
  }

感谢帮助解决此问题的人，我找到了另一种方法来解决此问题，并希望与大家分享，以便如果有人遇到此问题。再次感谢帮助我的人