Creé una cuadrícula CSS que muestra un elemento <p>{name}</p> en cada elemento de la cuadrícula. Cuando se activa un onMouseOver , quiero mostrar un nuevo div (contenido dentro del fragmento de reacción), pero en la misma posición.
En lugar de usar CSS, usé JavaScript para codificar la lógica para esto: cuando un usuario se desplaza sobre el elemento de la cuadrícula, cambia un valor booleano (guardado como variable de estado isMouseHovering ) de falso a verdadero. Tengo una declaración condicional que muestra el div 'nuevo', cuando este valor de estado es verdadero.
El problema es que esta lógica se aplica al elemento contenedor de elementos de cuadrícula y no a los elementos dentro del contenedor de cuadrícula. Entonces, cuando supero la cuadrícula, hace lo que se supone que debe hacer y muestra el nuevo div. Sin embargo, cuando paso el cursor sobre la etiqueta p dentro del elemento contenedor del elemento de cuadrícula, parpadea entre estados.
¿Cómo estructuro esto para que el div cambie al pasar el mouse, sin importar en qué parte del elemento de la cuadrícula el usuario pase el mouse?
Proyecto.js
import { useState } from 'react' const Project = ({name,url,techStack,image,blurb}) => { const [isMouseHovering, setMouseHovering] = useState(false); const handleOnMouseOver = () => setMouseHovering((isMouseHovering) => !isMouseHovering); const handleMouseOut = () => setMouseHovering(false); return( <div className = 'grid-item' onMouseOver={handleOnMouseOver} onMouseOut = {handleMouseOut}> { isMouseHovering ? ( // element I want to display when mouse hovering, in same position as <p>{name}</p> element <> <a href='https://xxxxxxxxxxxxxxxx'> <p>website</p> </a> </> ) : <p>{name}</p> } </div> ) } export default ProjectPrueba esto:
import { useState } from 'react' const Project = ({name,url,techStack,image,blurb}) => { const handleOnMouseOver = (dir) => { const ele = document.getElementById('dev_span'); if (dir === 'in' && ele) { ele.style.display = 'block'; } else if (ele) { ele.style.display = 'none'; } }; return( <div className="grid-item" onMouseEnter={() => handleOnMouseOver('in')} onMouseLeave={() => handleOnMouseOver('out')} > <span id="dev_span" style={{ display: 'none' }}> <a href="https://xxxxxxxxxxxxxxxx"> <p>website</p> </a> </span> <p>{name}</p> </div> ) }Puede verificar el elemento que activa el evento.
import { useState } from "react"; const Project = ({ name, url, techStack, image, blurb }) => { const [isMouseHovering, setMouseHovering] = useState(false); const handleOnMouseOver = (e) => { if (e.target.className === "grid-item") { setMouseHovering((isMouseHovering) => !isMouseHovering); } }; const handleMouseOut = () => setMouseHovering(false); return ( <div className="grid-item" onMouseOver={(e) => handleOnMouseOver(e)} onMouseOut={handleMouseOut} > {isMouseHovering ? ( // element I want to display when mouse hovering, in same position as <p>{name}</p> element <> <a href="https://xxxxxxxxxxxxxxxx"> <p>website</p> </a> </> ) : ( <p>{name}</p> )} </div> ); }; export default Project;El problema es que estás usando onMouseOver y onMouseOut en lugar de onMouseEnter y onMouseLeave.
onMouseOut se activará cuando pase el mouse sobre un elemento secundario del elemento en el que se encuentra causando el error que está describiendo.
También está alternando el estado en su función handleMouseOver pero, por lo que entendí, quiere que se establezca en verdadero cuando pase el div.
import { useState } from 'react'; const Project = ({ name, url, techStack, image, blurb }) => { const [isMouseHovering, setMouseHovering] = useState(false); const handleMouseEnter = () => setMouseHovering(true); const handleMouseLeave = () => setMouseHovering(false); return ( <div className="grid-item" onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} > {isMouseHovering ? ( // element I want to display when mouse hovering, in same position as <p>{name}</p> element <> <a href="https://xxxxxxxxxxxxxxxx"> <p>website</p> </a> </> ) : ( <p>{name}</p> )} </div> ); }; export default Project;https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseenter_event