html - 页面加载时的 CSS 不透明度

Question

我不擅长制作网站，但我正在尝试制作自己的网站。基本上我将我的页面分成两部分，左侧是菜单栏，右侧包含内容。为了在我的菜单栏上获得“酷”模糊效果，我用彩色图像覆盖它，当用户将鼠标悬停在它上面时，不透明度会发生变化(带有过渡)。

它按预期工作，除了当您单击链接并加载新页面时，它不会注册悬停直到您移动鼠标，这意味着图像的不透明度是完整的，直到您移动一点点，然后它跳到 0。

理想情况下，当一个新页面打开并且您的鼠标已经在左侧区域时，叠加图像的不透明度应该已经是 0。

#left {
  text-indent: 1cm;
  width: 23%;
  height: 100%;
  position: fixed;
  background: rgba(51, 51, 51, 1);
}
#right {
  padding-top: 2cm;
  width: 77%;
  height: auto;
  position: absolute;
  right: 0;
  background: white;
}
#img {
  position: absolute;
  opacity: 0.6;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-transition: opacity .25s ease-out;
  -moz-transition: opacity .25s ease-out;
  -o-transition: opacity .25s ease-out;
  transition: opacity .25s ease-out;
  color: #000;
  left: 0;
}
#left:hover>#img {
  opacity: 0;
}

希望我已经提供了足够的信息，在此先感谢

基础

Answer 1

如何“加载”页面？是 ajax.load 还是？因为如果是这样，该语言已经在使用，因此最好在其中制作悬停处理程序功能，因为在您移动鼠标之前，您的 CSS 文件无法在加载时注意到鼠标是否已经在您的图片上

对不起，我不能写下我在这里写的评论。