Take a look at this CodePen link, particularly in Chrome:
https://codepen.io/pkroupoderov/pen/jdRowv
Sometimes, the mouseLeave event doesn't trigger when a user quickly moves the mouse over multiple images. This results in some images still having the grayscale filter applied. How can this issue be fixed? It seems to work fine if a div is used instead of an anchor element. Should the markup be slightly modified or specific styles be applied to the anchor element?
The goal is to create an overlay effect on an image when a user hovers over it, similar to Instagram. Content will be added to the overlay later; the primary focus now is to resolve the mouseLeave event problem. CSS pseudo-classes won't suffice since the overlay must contain content.
const imageUrls = [
'https://farm8.staticflickr.com/7909/33089338628_052e9e2149_z.jpg',
'https://farm8.staticflickr.com/7894/46240285474_81642cbd37_z.jpg',
'https://farm8.staticflickr.com/7840/32023738937_17d3cec52f_z.jpg',
'https://farm8.staticflickr.com/7815/33089272548_fbd18ac39f_z.jpg',
'https://farm5.staticflickr.com/4840/40000181463_6eab94e877_z.jpg',
'https://farm8.staticflickr.com/7906/46912640552_4a7c36da63_z.jpg',
'https://farm5.staticflickr.com/4897/46912634852_93440c416a_z.jpg',
'https://farm5.staticflickr.com/4832/46964511231_6da8ef5ed0_z.jpg'
]
class Image extends React.Component {
state = {hovering: false}
handleHover = () => {
this.setState({hovering: true})
}
handleLeave = () => {
this.setState({hovering: false})
}
render() {
if (!this.state.hovering) {
return (
<div onMouseOver={this.handleHover}>
<img src={this.props.url} alt='' />
</div>
)
} else {
return ( // works fine when using <div> tag instead of <a> or <span>
<a href="#" style={{display: 'block'}} onMouseLeave={this.handleLeave}>
<img style={{filter: 'opacity(20%)'}} src={this.props.url} alt='' />
</a>
)
}
}
}
const Images = () => {
return (
<div className="gallery">
{imageUrls.map((image, i) => {
return <Image key={i} url={image} />
})}
</div>
)
}
ReactDOM.render(<Images />, document.getElementById('app'))