div 内 img 上的 Mouseenter 事件有效 sporadically/erratically

Question

我有一个缩略图网格。悬停后，我想放大屏幕中央的图像。经典吧？

每个缩略图都包裹在 div 中。当我在 img 或 div 上应用 mouseenter 或 mouseover 事件时，它根本无法正常工作。我用鼠标悬停，有些缩略图放大，有些根本没有，有些需要第二次或第三次悬停，有些闪烁。

这是怎么回事？缩略图是否可能“隐藏”在某些东西后面，因此看不到鼠标指针？它与 divs 中的图像有关吗？（我试图将事件侦听器应用于 imgs 或 divs，但没有成功）。

<div id="editGrid">
   <div> <img src="Gallery1.png" alt=""> </div>
   <div> <img src="Gallery2.png" alt=""> </div>
   <div> <img src="Gallery3.png" alt=""> </div>
</div>

const divs = document.querySelectorAll('#editGrid > div')
const images = document.querySelectorAll('#editGrid > div > img')
const bigImageArea = document.querySelector('#edit')
let bigImage

divs.forEach((image, i) => {
    image.addEventListener('mouseenter', () => {
        bigImage = images[i].cloneNode(false)
        bigImage.style.position = 'fixed'
        bigImage.style.left = '50vw'
        bigImage.style.top = '50vh'
        bigImage.style.transform = 'translate(-50%, -50%)'
        bigImageArea.appendChild(bigImage)
    })
    image.addEventListener('mouseleave', () => {
        bigImageArea.removeChild(bigImage)
    })
})

Answer 1

您的 #edit 元素似乎与图像重叠并触发了 mouseleave 事件。您可以使用 pointer-events: none; 禁用该元素上的鼠标事件，也可以避免内联样式：

const divs = document.querySelectorAll('#editGrid > div')
const images = document.querySelectorAll('#editGrid > div > img')
const bigImageArea = document.querySelector('#edit')
let bigImage

divs.forEach((image, i) => {
  image.addEventListener('mouseenter', () => {
    bigImage = images[i].cloneNode(false)
    bigImageArea.appendChild(bigImage)
  })
  image.addEventListener('mouseleave', () => {
    bigImageArea.removeChild(bigImage)
  })
})

#edit
{
  pointer-events: none;
}

#edit > img
{
  position: fixed;
  left: 50vw;
  top: 50vh;
  transform: translate(-50%, -50%);
}

#editGrid > div
{
  width: 30%;
}
#editGrid img
{
  width: 100%;
}

<div id="editGrid">
  <div><img src="https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w512-h342-n-l50-sg-rj" alt=""></div>
  <div><img src="https://lh3.googleusercontent.com/fl-GT6w3Ls6RT4vYnbkuYUyLY3lZJH8VtZ7xzxiym9YYaoVRCnZehdz6Icd0oAf6i3H9-O5cCNs6eunlxWr_Csstgsb98DdzNdLFBOlhw9NUfHdyuQjI=w384-h512-n-l50-sg-rj" alt=""></div>
  <div><img src="https://lh3.googleusercontent.com/9pPCK70Rw0k3wethMHb1qMaIB0VjeWLy57vYgSzKbF7oJuvO2nA0Nakk-95cvibWUDcEhYkfCKvdPKT03tXZd4M5jdhIEibLO9qw-XE=w512-h342-n-l50-sg-rj" alt=""></div>
</div>
<div id="edit"></div>

div 内 img 上的 Mouseenter 事件有效 sporadically/erratically

Mouseenter event on img inside div works sporadically/erratically

javascript

mouseover

image-gallery

mouseevent

mouseenter