懸停CSS時背景顏色不會改變

嗨，伙計們，我正在創建一個自定義的類似滑鼠的東西，我希望它的顏色在懸停時為白色鏈接 IDK 我的代碼有什么問題，選擇父元素時它無法正常作業但它作業正常但是當我使用子元素時它不起作用幫幫我，我被這個代碼困了大約 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>

我只是粘貼了我編碼的任何代碼，我不知道是什么問題。

uj5u.com熱心網友回復：

ul li a:hover ~ .cursor

此 CSS 選擇器適用cursor于其類前面a是懸停元素的每個元素。

但是在您提供的 HTML 中，div具有cursor該類之前是div具有nav該類。

使用 CSS，我能想到的唯一解決方案是使用這個選擇器：

.nav:hover ~ .cursor

您可以添加width: min-content;到所有li元素以避免白色背景傳播得太遠。

請注意，如果div.cursor緊跟在div.nav完整 HTML 中的 之后，則應使用 代替~。

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>

uj5u.com熱心網友回復：

這個問題有兩個答案：

1- 當你可以使用時~，那個a和<div ></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>

    

標籤：html css css-选择器

上一篇：使用CSS屬性可見性的React閃爍文本

下一篇：雪人css挑戰，如何將眼睛放在頭上