Tengo dos elementos de texto, item1 y item2, y un div con algo de texto dentro. Quiero mantener el div oculto de forma predeterminada, pero mostrarlo en la posición del cursor cuando paso el cursor sobre el elemento de texto 1 o el elemento 2. Consulte la animación GIF de muestra en este enlace
Intenté esto en código Jquery dentro de React. Pero da error.
$(".text-item").mouseenter(function (e) { $(".box") .css({ position: "absolute", right: e.pageX, top: e.pageY, display: "block", }) .show(); });Prueba esto:
import {useState, Fragment} from react; const [visible, setVisible] = useState(false) const MyApp = ()=> { return ( <Fragment> { visible && <div className="hiddenContainer> <p>Your hidden text</p> </div> } </Fragment> <p onMouseEnter={()=>setVisible(!visible)}>Item 1</p> <p onMouseEnter={()=>setVisible(!visible)}>Item 2</p> ) }