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

Question

I have a div called hoverZone , and another called followMouse . The followMouse div, 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>