Hover event not working with div following mouse
I have a div called hoverZone
and another called followMouse
. The followMouse
div, as the name suggests, always follows the mouse, the problem is that in my css I have this rule that never applies:
.hoverZone:hover ~ .followMouse {
box-shadow: 0px 0px 30px #fff;
}
Any ideas on how to get around this issue?
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>
source to share
.followMouse
the default is position:static;
, so change top
, left
etc. does not affect the item. Give position: absolute;
on .followMouse
to 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>
source to share