Quiero mostrar una imagen diferente al pasar el mouse sobre div en reaccionar con usestate. El problema es cuando paso el mouse sobre una sola imagen y luego todas las imágenes cambian. Cómo manejar este problema. Se adjuntan capturas de pantalla del resultado de desplazamiento
const [open, setOpen] = useState(false); <div className="container-fluid" id="companies"> <div className="row"> <div className="col-md-3 p-0"> <div className="company-block" onMouseOver={() => setOpen(true)} onMouseOut={() => setOpen(false)}> <Image src={open ? BlockFiBlack : BlockFiWhite}/> </div> </div> <div className="col-md-3 p-0"> <div className="company-block" onMouseOver={() => setOpen(true)} onMouseOut={() => setOpen(false)}> <Image src={open ? NerdWalletBlack : NerdWalletWhite}/> </div> </div> <div className="col-md-3 p-0"> <div className="company-block" onMouseOver={() => setOpen(true)} onMouseOut={() => setOpen(false)}> <Image src={open ? SuperRateBlack : SuperRateWhite}/> </div> </div> <div className="col-md-3 p-0"> <div className="company-block" onMouseOver={() => setOpen(true)} onMouseOut={() => setOpen(false)}> <Image src={open ? XealBlack : XealWhite}/> </div> </div> </div> </div>Antes del resultado de desplazamiento de div Después del resultado de desplazamiento de div
mover elementos individuales como los siguientes para separar el componente
<div className="col-md-3 p-0"> <div className="company-block" onMouseOver={() => setOpen(true)} onMouseOut={() => setOpen(false)}> <Image src={open ? BlockFiBlack : BlockFiWhite}/> </div> </div>y administrar el estado abierto allí.
esto funcionaría bien de esa manera.
Puede usar una cadena en lugar de un booleano para establecer qué imagen se desplaza actualmente.
const [open, setOpen] = useState(''); const unhover = () => { setOpen('') } <div className="container-fluid" id="companies"> <div className="row"> <div className="col-md-3 p-0"> <div className="company-block" onMouseOver={() => setOpen('blockfi')} onMouseOut={unhover}> <Image src={open === 'blockfi' ? BlockFiBlack : BlockFiWhite}/> </div> </div> <div className="col-md-3 p-0"> <div className="company-block" onMouseOver={() => setOpen('nerdwallet')} onMouseOut={unhover}> <Image src={open === 'nerdwallet' ? NerdWalletBlack : NerdWalletWhite}/> </div> </div> <div className="col-md-3 p-0"> <div className="company-block" onMouseOver={() => setOpen('superrate')} onMouseOut={unhover}> <Image src={open === 'superrate' ? SuperRateBlack : SuperRateWhite}/> </div> </div> <div className="col-md-3 p-0"> <div className="company-block" onMouseOver={() => setOpen('xeal')} onMouseOut={unhover}> <Image src={open === 'xeal' ? XealBlack : XealWhite}/> </div> </div> </div> </div>