Как Bubble onMouseMove событие - PullRequest
Новая
       19

Как Bubble onMouseMove событие

0 голосов
/ 21 ноября 2018

У меня есть изображение, где я хочу показать div, когда я начинаю над ним висеть, но когда этот div зависает, React сходит с ума, потому что после появления второго div изображение останавливает его событие onMouseMove, а State хранит переменную, которая будет очищаться, еслиDiv появляются или нет.Имя переменной "zoom" Я хочу продолжать вызывать событие 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
  }}
>

1 Ответ

0 голосов
/ 21 ноября 2018

Похоже, у вас есть div поверх img.

Когда кажется, что ваша мышь находится над div, а не над img, следовательно, отменяя событие.

Я бы предложил добавить атрибут CSS pointerEvents: 'none' к div, чтобы игнорировать события мыши и позволить им обрабатываться элементом ниже.

Надеюсь, это поможет.

...