3

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.

4
  • Tienes un par de errores, document.querySelector('.insideMove'); la clase correcta es insideMuve y, además, cuando asignas eventos con .addEventListener(), no debe llevar el on, pero el evento debería ser mousemove en lugar de mouseenter. Con eso, solo faltaría limitar el movimiento al área del padre.
    – Triby
    Commented el 26 nov. 2021 a las 19:08
  • acabo de corregir esos errores y le agregue código javascript, ahora mi problema es que el cursor y el div de clase " .insideMuve" logran moverse coordinadamente; pero no están juntos.
    – kraud
    Commented el 26 nov. 2021 a las 19:45
  • No entiendo, lo que quieres es que se mueva al lado del cursor o solo dentro del cuadro hijo. Commented el 26 nov. 2021 a las 20:02
  • @CarlosAriasMontero quiero que se mueva "la bolita azul" junto al cursor, dentro del cuadro hijo.
    – kraud
    Commented el 26 nov. 2021 a las 20:04

1 respuesta 1

1

Por fin lo logre!!! Talvez se puede reducir a algo más simple, pero es lo tengo, por ahora. con esto se puede hacer el efecto del mouse sobre los botones en: [https://rockyvision.com/fr][1]

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*/
} 
<div class="box">
  <div class="etiqueta">
  <div class="hijo"></div>
  </div>
</div> 

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.