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

我希望我已经提供了足够的信息，提前谢谢

BAS

Answer 1

你如何加载＆＃39;这页纸？它是ajax.load还是？因为如果是这样的话，那个语言已经在使用，因此最好在那里制作一个悬停处理函数，因为你的CSS文件无法在加载时注意到鼠标已经在你的图片上已经或者没有你已经移动了它

很抱歉，我不能在此写下评论。

页面加载时的CSS不透明度

1 个答案: