悬停时背景颜色不变 CSS

Question

大家好我正在创建一个自定义的类似鼠标的东西，我希望它悬停在链接上时颜色为白色 IDK 我的代码有什么问题，当 select 父元素工作正常时它无法正常工作，但是当我使用子元素时它不起作用帮助我，我被这段代码困了大约 4 个小时我需要帮助

这是我的代码

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 选择器适用于具有 class cursor 且前面有悬停的 a 元素的每个元素。

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

使用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>

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

感谢帮助解决这个问题的人，我找到了另一种方法来做到这一点，并想与大家分享这个，如果有人遇到这个问题。再次感谢帮助过我的人

悬停时背景颜色不变 CSS

Background color not changing when it's hovered CSS

html

css

css-selectors