必须将鼠标移出视口并返回，javascript才能生效

当我第一次加载页面时，Javascript mouseover和mouseout事件似乎不起作用。奇怪的是，如果我将鼠标从视口中移到屏幕顶部一两秒钟，然后再回到视口中，javascript就会启动并按预期工作

以下是html css和javascript：

const picWindows=document.queryselectoral（“.window”）；
const container=document.querySelector（“.container”）；
picWindows.forEach（（项目）=>{
item.addEventListener（“鼠标指针”，（）=>{
item.classList.add（“活动”）；
});
item.addEventListener（“mouseleave”，（）=>{
item.classList.remove（“活动”）；
});
item.addEventListener（“单击”，（）=>{
container.classList.toggle（“活动”）；
item.classList.toggle（“显示”）；
});
})

*{
保证金：0；
填充：0；
框大小：边框框；
}
身体{
背景：#27ae60；
盒影：插图70px 70px 250px#000，
插图-70px-70px 250px#000；
}
.集装箱{
宽度：80%；
高度：100vh；
显示器：flex；
保证金：0自动；
}
.container.active:：after{
内容：“；
位置：绝对位置；
排名：0；
左：0；
高度：100vh；
宽度：100vw；
背景：rgba（0,0,0,9）；
z指数：1；
指针事件：无；
}
.窗户{
身高：100%；
过渡：flex.5s立方贝塞尔（.17,67,52,1.53）；
光标：指针；
}
.window1{
背景：url（“https://images.unsplash.com/photo-1518495973542-4542c06a5843?ixlib=rb-1.2.1&ixid=eyjhcbfawqiojeymdd9&auto=format&fit=crop&w=800&q=60“）无重复中心/盖；
弹性：1；
}
.window2{
背景：url（“https://images.unsplash.com/photo-1601758176559-76c75ead317a?ixlib=rb-1.2.1&ixid=eyjhcbfawqiojeymdd9&auto=format&fit=crop&w=800&q=60“）无重复中心/盖；
弹性：1；
}
.window3{
背景：url（“https://images.unsplash.com/photo-1601758174039-617983b8cdd9?ixlib=rb-1.2.1&ixid=eyjhcbfawqiojeymdd9&auto=format&fit=crop&w=800&q=60“）无重复中心/盖；
弹性：1；
}
.window4{
背景：url（“https://images.unsplash.com/photo-1587502536263-5dda37cd33f0?ixlib=rb-1.2.1&ixid=eyjhcbfawqiojeymdd9&auto=format&fit=crop&w=800&q=60“）无重复中心/盖；
弹性：1；
}
.窗口5{
背景：url（“https://images.unsplash.com/photo-1422564030440-1ecae6e21f67?ixlib=rb-1.2.1&ixid=eyjhcbfawqiojeymdd9&auto=format&fit=crop&w=800&q=60“）无重复中心/盖；
弹性：1；
}
.window6{
背景：url（“https://images.unsplash.com/photo-1553531384-397c80973a0b?ixlib=rb-1.2.1&ixid=eyjhcbfawqiojeymdd9&auto=format&fit=crop&w=800&q=60“）无重复中心/盖；
弹性：1；
}
.主动{
弹性：3；
}
.表演{
位置：绝对位置；
宽度：90%；
身高：90%；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
背景尺寸：包含；
z指数：2；
}

扩展图像库

也许检查页面是否已加载，然后分配值和侦听器会有所帮助

window.onload = () => {
  const picWindows = document.querySelectorAll(".window");
  const container = document.querySelector(".container");

  picWindows.forEach((item) => {
    item.addEventListener("mouseenter", () => {
      item.classList.add("active");
    });

    item.addEventListener("mouseleave", () => {
      item.classList.remove("active");
    });

    item.addEventListener("click", () => {
      container.classList.toggle("active");
      item.classList.toggle("show");
    });
  });
};

---

也许检查页面是否已加载，然后分配值和侦听器会有所帮助

window.onload = () => {
  const picWindows = document.querySelectorAll(".window");
  const container = document.querySelector(".container");

  picWindows.forEach((item) => {
    item.addEventListener("mouseenter", () => {
      item.classList.add("active");
    });

    item.addEventListener("mouseleave", () => {
      item.classList.remove("active");
    });

    item.addEventListener("click", () => {
      container.classList.toggle("active");
      item.classList.toggle("show");
    });
  });
};

---

谢谢你的回复！出于某种原因，这个问题只发生在Chrome上。奇怪的是，我不得不删除并重新安装Chrome，现在一切正常。一个奇怪的。再次感谢。

感谢您的回复！出于某种原因，这个问题只发生在Chrome上。奇怪的是，我不得不删除并重新安装Chrome，现在一切正常。一个奇怪的。再次感谢。

能否尝试将脚本标记放在结束标记之前，并删除defer参数？您可能应该将JS代码包装在一个自动执行函数（或类似的函数）中。您可以尝试将脚本标记放在结束标记之前，并删除defer参数吗？您可能应该将JS代码包装在一个自动执行函数（或类似的函数）中。