let hijo = document.querySelector('.hijo');
let etiqueta = document.querySelectorAll('.etiqueta');
//El metodo .getBoundingClientRect() nos da
//la posicion de un elemento con respecto al viewport(en numeros).
// tomare la posicion constante del elemento .hijo
const coords = hijo.getBoundingClientRect();
const j = coords.top; // estamos obteniendo la posicion top en numero
const k = coords.left;
// se aplica forEach para obtener posicion de cada movimiento del mouse
etiqueta.forEach(link => {
// se obtiene la posicion del mouse con la funcion mover(e)
function mover(e){
// se calcula la posicion top y left del mouse al cual le restamos
// la posicion del elemento "hijo"; resultado: mouse e "hijo" juntos
let m = e.pageY ;
let n = e.pageX ;
let t = m - j;
let l = n - k;
hijo.style.top = t + "px"; // agregando px a los numeros
hijo.style.left = l + "px";
};
// mouseover dice que entro en elemento etiqueta
link.addEventListener("mouseover",() => {
hijo.classList.add("edd1");// solo agrega un class que le da color red
window.addEventListener("mousemove",mover);// agrega el evento junto a la funcion
});
link.addEventListener("mouseleave",() => {// mouseleave dice que salio del elemento etiqueta
hijo.classList.remove("edd1"); // le quita un class, que le quita color red
window.removeEventListener("mousemove", mover);// remuev el evento
});
});
/* Simples estilos para delimitar los div*/
.box{
width: 300px;
height: 300px;
border: solid 1px black;
}
.etiqueta{
width:100px;
height:100px;
position: absolute;
left:50px;
top:50px;
background: green;
overflow: hidden;
position:relative;
}
.hijo{
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: blue;
transform: scale(0); /*desaparece el elemento hijo*/
}
.edd1{
background-color: red;
transform: scale(1); /*reaparece el elemento hijo con el mause al centro*/
}
// un ejemplo con html
<div class="box">
<div class="etiqueta">
<div class="hijo"></div>
</div>
</div>
Comments