Hover event isn't working with a div following the mouse

Question

I have a div called hoverZone, and another called followMouse. The followMousediv, as the name suggests is always following the mouse, the problem is that in my css I have this rule that never gets applied:

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

Any ideas on how to bypass this problem?

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 has position:static; by default so change top, left and etc doesn't have any effect on element. Give position: absolute; to .followMouse will fix your problem.

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>