Tengo un problema en el que el mouse no sigue el div de cerca debido al div principal izquierdo y superior. Supongamos que parent.jsx está desarrollado por otro desarrollador, y solo puedo controlar child.jsx , ¿hay alguna manera de hacer que el div siga al mouse?
Aquí está el padre jsx
import "./styles.css"; import Child from "./child"; export default function Parent() { return ( <div style={{ top: "25px", left: "20px", position: "relative" }} > <Child /> </div> ); }el niño jsx
import "./styles.css"; import { useRef } from "react"; export default function Child() { const descBox = useRef(null); const handleMove = (e) => { console.log(e.clientX, e.clientY); descBox.current.style.left = `${e.clientX}px`; descBox.current.style.top = `${e.clientY}px`; }; return ( <> <div onMouseMove={handleMove} style={{ height: "300px", width: "100%", backgroundColor: "red" }} ></div> <div className="dropdown1" ref={descBox}> 123asdfsfdafffasdfasfdsajkj </div> </> ); }El css para niño
.dropdown1 { position: absolute; left: 150px; top: 10px; background: #2b4557; padding: 4px 8px; font-size: 12px; line-height: 18px; color: #fff; }Codesandbox para ejecutar el código.
Como el elemento secundario está posicionado en forma absoluta dentro del elemento principal en posición relativa, puede calcular sus posiciones izquierda y superior en relación con el elemento principal y utilizarlas.
Este código agrega un pequeño desplazamiento para dar un pequeño espacio entre el cursor y el elemento secundario (que puede o no desear).
const handleMove = (e) => { const rect = e.target.getBoundingClientRect(); const x = e.clientX - rect.left + 10; const y = e.clientY - rect.top + 10; descBox.current.style.left = `${x}px`; descBox.current.style.top = `${y}px`; };