我有一个指向Codepen的链接,最好在Chrome中观察到该问题:
https://codepen.io/pkroupoderov/pen/jdRowv
当用户在多个图像上快速移动鼠标时,有时不会触发mouseLeave事件,这意味着某些图像仍将应用灰度滤镜。如何解决?如果我使用div而不是锚元素,则可以正常工作。我应该稍微更改标记还是将某些样式应用于锚元素?还是应该改用React-Bootstrap中的某些组件?
当用户像在Instagram上一样悬停在图像上时,我正在尝试在图像上创建叠加效果。稍后,我将需要将内容添加到叠加层中,只需要解决mouseLeave事件问题即可。
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'))
答案 0 :(得分:0)
您可以使用纯CSS实现此功能,而无需使用Javascript。
a {
display: block;
}
a:hover {
filter: opacity(.2);
}