I'm mapping through an array that contains properties such as image: link to image and hover_image: link to image
Is there a way to change an image on hover? Something sort of like this:
<img src={hover ? item.hover_image : item.image} />
If so, how can I define that the element is being hovered over, thank you!
Update: the onMouseHover or any other onMouse seems to not work on my image tag, here is the code:
{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 has two event handlers for that:
onMouseEnter
onMouseLeave
You could put those events on the component that you are hovering over and make them set a state variable, to track the hover state. e.g.:
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} />
</>
);
}
Edit based on coments:
{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>
))}
Inline JavaScript version**
<img src="a.jpg" onmouseover="this.src='b.jpg'" onmouseout="this.src='a.jpg'" />
this refer to the current img tag
Example :
<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'" /> You can achieve this behaviour by changing the src property of the target on which the event has occurred.
For an example:
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>;
}