Estoy mapeando a través de una matriz que contiene propiedades como image: link to image y hover_image: link to image
¿Hay alguna manera de cambiar una imagen al pasar el mouse? Algo así como esto:
<img src={hover ? item.hover_image : item.image} />Si es así, ¿cómo puedo definir que el elemento se está desplazando, gracias!
Actualización: onMouseHover o cualquier otro onMouse parece no funcionar en mi etiqueta de imagen, aquí está el código:
{array.map((item, key) => { <div key={key}> <a target="_blank" href={item.link} > <img onMouseEnter={(e) => console.log(e.currentTarget.src)} alt={item.name} src={item.image} /> </a> </div> })}React tiene dos controladores de eventos para eso:
onMouseEnter onMouseLeavePuede colocar esos eventos en el componente sobre el que se desplaza y hacer que establezcan una variable de estado para realizar un seguimiento del estado de desplazamiento. p.ej:
function YourOuterComponent({item}) { const [hover, setHover] = useState(null); return ( <> <div id='whatever' onMouseEnter={(e) => setHover(e.currentTarget.id)} onMouseLeave={() => setHover(null)}> hover over me </div> <img src={hover ? item.hover_image : item.image} /> </> ); }Editar basado en comentarios:
{array.map((item, key) => ( <div key={key}> <a target="_blank" href={item.link}> <img alt={item.name} src={item.image} onMouseEnter={(e) => { e.currentTarget.src = item.hover_image; }} onMouseLeave={(e) => { e.currentTarget.src = item.image; }} /> </a> </div> ))}Versión de JavaScript en línea**
<img src="a.jpg" onmouseover="this.src='b.jpg'" onmouseout="this.src='a.jpg'" /> this refiere a la etiqueta img actual
Ejemplo :
<img width="100" height="100" src="https://onlinejpgtools.com/images/examples-onlinejpgtools/coffee-resized.jpg" onmouseover="this.src='https://cdn.pixabay.com/photo/2021/08/25/20/42/field-6574455__340.jpg'" onmouseout="this.src='https://onlinejpgtools.com/images/examples-onlinejpgtools/coffee-resized.jpg'" />Puede lograr este comportamiento cambiando la propiedad src del destino en el que se produjo el evento.
Para un ejemplo:
function App() { const imgs = [ { image: "https://images.unsplash.com/photo-1644982654072-0b42e6636821?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80", hover_image: "https://images.unsplash.com/photo-1648655514581-12808a5eb8c3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60", }, ]; const elements = imgs.map((img, i) => { return ( <img key={i} onMouseOver={(e) => { e.target.src = img.hover_image; }} src={img.image} style={{ height: "200px", width: "200px" }} /> ); }); return <div className="app">{elements}</div>; }