Lo que busco es hacer que mi div
de class="insedeMuve"
(la bolita azul) se mueva junto al cursor, cuando este llegue a su div padre. Ya he logrado este efecto en un div
, hijo directo de body
; pero en este caso intento aplicarle el mismo javascript al nieto del body
y no funciona.
let insideMove = document.querySelector('.insideMove');
let etiqueta = document.querySelector('.etiqueta');
etiqueta.addEventListener("mouseover", mover);
function mover(){
window.addEventListener("mousemove", inside);
function inside(e){
insideMove.style.top = e.pageY + "px";
insideMove.style.left = e.pageX + "px";
};
};
.box {
width: 500px;
height:500px;
border: solid 2px green;
}
.etiqueta {
position: relative;
width: 100px;
height:100px;
border: solid 2px yellow;
overflow: hidden;
left: 400px;
}
.insideMove {
display:inline-block;
width: 16px;
height:16px;
border-radius: 8px;
border:solid 1px black;
background-color: blue;
position: absolute;
}
<div class="bol">
<div class="box">
<div class="etiqueta">
<div class="insideMove"></div>
</div>
</div>
</div>
Yo supongo que necesito que el cursor detecte que llego al div
padre de la "bolita azul" y luego empieza moverse junto a la "bolita azul", pero no sé cómo hacer eso.
document.querySelector('.insideMove');
la clase correcta esinsideMuve
y, además, cuando asignas eventos con.addEventListener()
, no debe llevar elon
, pero el evento debería sermousemove
en lugar demouseenter
. Con eso, solo faltaría limitar el movimiento al área del padre.