懸停事件不跟隨鼠標跟一個div

Question

我有一個名爲hoverZone的div，另一個叫followMouse。 The followMouse格，顧名思義始終跟隨鼠標移動，問題是，在我的CSS我有這樣的規則，從來沒有得到應用：

.hoverZone:hover ~ .followMouse { 
box-shadow: 0px 0px 30px #fff; 
} 

如何繞過這個問題的任何想法？

window.addEventListener("mousemove", move, false); 
 

 
function move(e){ 
 
    var mouseX = parseInt(e.clientX); 
 
    var mouseY = parseInt(e.clientY); 
 
     
 
    var follower = document.querySelector(".followMouse"); 
 
    follower.style.left = mouseX + "px"; 
 
    follower.style.top = mouseY + "px"; 
 
}

.hoverZone { 
 
    display: block; 
 
    height: 90px; 
 
    width: 90px; 
 
    position: absolute; 
 
} 
 

 
.hoverZone:hover ~ .followMouse { 
 
    background-color: blue; 
 
    box-shadow: 0px 0px 30px #fff; 
 
} 
 

 
.followMouse{ 
 
    width: 90px; 
 
    height: 90px; 
 
    background-color: orange; 
 
}

<div class="hoverZone"></div> 
 
<div class="followMouse"></div>

Answer 1

.followMouse有position:static;默認所以更改top，left和等沒有元素上的任何影響。給position: absolute;至.followMouse將解決您的問題。

window.addEventListener("mousemove", move, false); 
 

 
function move(e){ 
 
    var mouseX = parseInt(e.clientX); 
 
    var mouseY = parseInt(e.clientY); 
 
     
 
    var follower = document.querySelector(".followMouse"); 
 
    follower.style.left = mouseX + "px"; 
 
    follower.style.top = mouseY + "px"; 
 
}

.hoverZone { 
 
    display: block; 
 
    height: 90px; 
 
    width: 90px; 
 
    position: absolute; 
 
} 
 

 
.hoverZone:hover ~ .followMouse { 
 
    background-color: blue; 
 
    box-shadow: 0px 0px 30px #000; 
 
} 
 

 
.followMouse{ 
 
    width: 90px; 
 
    height: 90px; 
 
    background-color: orange; 
 
    position:fixed; 
 
}

<div class="hoverZone"></div> 
 
<div class="followMouse"></div>