1

我在玩背景过滤器：在 chrome 76 中。我正在尝试制作一个包含 2 个 div 的菜单，每个 div 上都有一个背景过滤器。第一个 div 完美运行，但第二个没有应用过滤器效果。当我删除第一个 div 的过滤器时，第二个有效。有什么想法吗？代码笔链接： https ://codepen.io/andrewthegreat5/pen/LKzaEL

HTML

<div id="mySidenav" class="sidenav" onmouseover="openNav()">
    <a class="active" href="#">Home</a>
    <a href="page2.html">page2</a>
    <a href="page3.html">page3</a>
    <a href="#" target="_blank">page4</a>
    <div id="mouse" class="mouseout" onmouseout="closeNav()">
        <div class="flyoutTab">Menu</div>
    </div>
</div>

CSS

.sidenav{
  height: 100%;
  width: 0%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.1);
  overflow-x: hidden;
  transition: 0.3s;
  padding-top: 4%;
  backdrop-filter: blur(5px);
}

.mouseout{
  height: 100%;
  width: 5%;
  position: fixed;
  z-index: 3;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.3);
  overflow-x: hidden;
  transition: 0.3s;
  backdrop-filter: blur(10px);
}
4

2 回答 2

0

看起来像背景过滤器：不适合 div 汤，​​我把它拆了，效果很好。

于 2019-07-24T06:52:24.883 回答
0

解决此问题的理想方法是在样式表中创建类，例如

.remove-blur {
    backdrop-filter: none;
  }

  .add-blur {
    backdrop-filter: blur(80px);
  }

然后开始使用 Javascript 通过 DOM 切换您想要应用它的位置

于 2020-12-20T03:30:21.277 回答