如何冒泡 onMouseMove 事件
How to Bubble onMouseMove event
我有图像,当我开始悬停在上面时我想显示 div,但是当 div 悬停时 React 变得疯狂,因为在第二个 div 之后出现图像停止他的 onMouseMove
事件,
状态保存变量,它将决定 div 是否出现。变量名“缩放”
我想继续触发 onMouseMove
事件,即使第二个 div 出现,有什么想法可以得到这样的东西吗?
<img
onMouseMove={e => {
this.setState({ zoom: 'block' });
}}
onMouseLeave={() => {
this.setState({ zoom: 'none' });
}}
id="productImg"
src={images[this.state.imgActive]}
/>
)}
<div
style={{
display: this.state.zoom,
float: 'right',
overflow: 'hidden',
zIndex: 100,
transform: 'translateZ(0px)',
opacity: '0.4',
zoom: 1,
width: 285,
height: 285,
backgroundColor: 'white',
border: '1px solrgb(0, 0, 0)',
backgroundRepeat: 'no-repeat',
position: 'absolute',
left: 0,
top: 0
}}
>
您似乎在 img
之上添加了一个 div
。
当您的鼠标出现在 div
之上而不再在 img
之上时,因此取消事件。
我建议将 CSS 属性 pointerEvents: 'none'
添加到 div
以忽略鼠标事件并让它们由下面的元素处理。
希望对您有所帮助。
我有图像,当我开始悬停在上面时我想显示 div,但是当 div 悬停时 React 变得疯狂,因为在第二个 div 之后出现图像停止他的 onMouseMove
事件,
状态保存变量,它将决定 div 是否出现。变量名“缩放”
我想继续触发 onMouseMove
事件,即使第二个 div 出现,有什么想法可以得到这样的东西吗?
<img
onMouseMove={e => {
this.setState({ zoom: 'block' });
}}
onMouseLeave={() => {
this.setState({ zoom: 'none' });
}}
id="productImg"
src={images[this.state.imgActive]}
/>
)}
<div
style={{
display: this.state.zoom,
float: 'right',
overflow: 'hidden',
zIndex: 100,
transform: 'translateZ(0px)',
opacity: '0.4',
zoom: 1,
width: 285,
height: 285,
backgroundColor: 'white',
border: '1px solrgb(0, 0, 0)',
backgroundRepeat: 'no-repeat',
position: 'absolute',
left: 0,
top: 0
}}
>
您似乎在 img
之上添加了一个 div
。
当您的鼠标出现在 div
之上而不再在 img
之上时,因此取消事件。
我建议将 CSS 属性 pointerEvents: 'none'
添加到 div
以忽略鼠标事件并让它们由下面的元素处理。
希望对您有所帮助。