Question

我有图像，当我开始在其上悬停时，我想在其中显示div，但是当该div悬停时，React变得疯狂，因为在第二个div出现后，图像停止了他的onMouseMove事件， State持有变量，如果div是否出现，该变量将降低。变量名“ zoom” 我想即使在第二个div出现时也要继续触发onMouseMove事件，有什么想法可以得到这样的东西吗？

  <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
  }}
>

Answer 1

似乎您在div上有一个img。

当鼠标出现在div上方时，鼠标不再位于img上方，因此取消了该事件。

我建议将CSS属性pointerEvents: 'none'添加到div以便忽略鼠标事件，并由下面的元素处理它们。

希望有帮助。

如何使onMouseMove事件起泡

1 个答案: