React onMouseEnter/onMouseLeave used to hover in a map - css

Question

I'm currently working on a dating website for a school project, but i'm stuck and not sure if i'm on the right way.
On the user profile, i want a list of the photos the user choose to show, and i want a hover on the photo where the pointer is.
In my state i added a listPhotoHover: [ ], a tab that contains variables true or false. listPhotoHover[0] = true means the first photo of the list has a hover, false means no hover.
I map and add a div for every photo with a onMouseEnter( ) that takes the photo index and set it an hover if fired.
The hover appears if listPhotoHover[index] exists, the hover div has an onMouseLeave( ) that takes the photo index and set the hover of the photo as false.
Everything seems to work but i'm not sure if it's the best way to do it, and when i move very fast on every photo the hover is still there i think the onMouseLeave( ) don't run.
Here's my code
Map of every photo :
photos.map((photo, index) => {
return
<div className={`flex row`} key={index} >
<img
className={classes.userPhotos}
src={photo}
alt={`photo de ${name}`}
onMouseEnter={() => { this.haveHover(index) }}
/>
{
listPhotoHover[index]
? <div
className={`
absolute flex center alignCenter
${classes.userPhotos} ${classes.photoHover}
`}
onMouseLeave={
() => { this.removeHover(index) }
}
/>
: null
}
</div>
})
function when onMouseEnter() or onMouseLeave() is fired:
haveHover (index, value) {
const tab = this.state.listPhotoHover
tab[index] = value
this.setState({listPhotoHover: tab})
}
I would like to know why does the onMouseLeave() don't work when my pointer move very fast and also what is the best way to do an hover on a map.
Thank you for your advices and sorry if i don't write english correctly
ps: i checked previous questions and didn't find any answer yet :(
Josephine

Answer 1

I don't believe you need javascript to achieve your desired effect. If it is simply to show something when the image is hovered, you can uses some advanced CSS selectors to do this. Run the snippet below to
html {
font-family: sans-serif;
font-size: 10px;
}
.wrap {
position: relative;
}
.image {
width: 80px;
height: 80px;
}
.imageinfo {
display: none;
width: 80px;
height: 17px;
background: #cc0000;
color: #efefef;
padding: 3px;
text-align: center;
box-sizing: border-box;
position: absolute;
bottom: -13px;
}
/* here's the magic */
.image:hover+.imageinfo {
display: block;
}
Hover the image to see the effect
<div class="wrap">
<img class="image" src="https://www.fillmurray.com/80/80" />
<div class="imageinfo">
Bill Murray FTW
</div>
</div>

Answer 2

I just realized i did it all wrong, i added a className with a '&:hover' on the div containing one photo, and it works. No need javascript :D
I don't know why i wanted to complicate it haha..
className:
ANSWER: {
'&:hover': {
opacity: '0.4',
cursor: 'pointer'
}
}
div with the photo:
photos.map((photo, index) => {
return <div className={`flex row ${classes.ANSWER}`} key={index} >
<img
className={classes.userPhotos}
src={photo}
alt={`${name}`}
/>
</div>
})
Hope my mistake will help some people