When viewing a link to a Codepen, the issue is most noticeable in Chrome:
https://codepen.io/pkroupoderov/pen/jdRowv
Sometimes, the mouseLeave event fails to trigger when a user quickly moves the cursor over multiple images, resulting in some images retaining the grayscale filter. How can this be fixed? Switching from an anchor element to a div resolves the issue completely. Should I tweak the markup slightly or apply specific styles to the anchor element? Perhaps leveraging a component from React-Bootstrap could help?
The goal is to create an overlay effect on an image when a user hovers over it, similar to Instagram. The content for the overlay will be added later; currently, the focus is on resolving the mouseLeave event problem.
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'))