Question

[更详细地重新发布已删除的问题] 我一直在寻找答案，但没有找到类似的参考。这是HTML / CSS / Javascript的最低版本：

function switchitem(id) {
  var x = document.getElementById(id);
  if (x.className.indexOf("item-wrap-hidden") != -1) {
    x.className = "item-wrap";
  } else {
    x.className = x.className.replace("item-wrap", "item-wrap-hidden");
  }
}

button.accordion {
  background-color: #333;
  color: #eee;
}

.active,
.accordion:hover {
  background-color: #666;
}

.item-wrap {
  overflow: hidden;
  z-index: 0;
  position: relative;
}

.item-wrap-hidden {
  position: absolute;
  left: -999em;
}

<button onclick="switchitem('id')" class="accordion">Show / Hide Content</button>
<div id="id" class="item-wrap-hidden">
  <p>content that is hidden and revealed goes here</p>
</div>

这完全可以按需工作：按钮在屏幕上，单击按钮时会出现项目包装框，再次单击按钮时，项目包装框会消失。在正式版中，有一些样式和CSS动画。

然后我继续设置项目包装盒的样式，使它的背景是主体背景图像的模糊低透明度版本，从而破坏了功能。非工作最低版本：

function switchitem(id) {
  var x = document.getElementById(id);
  if (x.className.indexOf("item-wrap-hidden") != -1) {
    x.className = "item-wrap";
  } else {
    x.className = x.className.replace("item-wrap", "item-wrap-hidden");
  }
}

button.accordion {
  background-color: #333;
  color: #eee;
}

.active,
.accordion:hover {
  background-color: #666;
}

.item-wrap {
  overflow: hidden;
  z-index: 0;
  position: relative;
}

.item-wrap::after {
  overflow: hidden;
  content: "";
  background-image: url("page_background_image.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-attachment: fixed;
  background-size: cover;
  opacity: .8;
  filter: alpha(40);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: fixed;
  z-index: -1;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

.item-wrap-hidden {
  position: absolute;
  left: -999em;
}

<button onclick="switchitem('id')" class="accordion">Show / Hide Content</button>
<div id="id" class="item-wrap-hidden">
  <p>content that is hidden and revealed goes here</p>
</div>

添加此选项后，一旦显示内容，该按钮便会停用，因此无法再次隐藏它。在我的制作页面上，有多个手风琴折叠，它会禁用所有折叠按钮，因此，一旦取消隐藏一折，您将无能为力。

将item-wrap::after的position属性更改为absolute可以使页面按需工作，但是在Mac上的Chrome和Safari中进行测试时，会出现很多瑕疵，并且页面变得抽搐，缓慢且响应速度较慢。以下是链接的示例：

Working Production Example-当内容在抖动后的模糊图像中进行动画处理时，滚动时页面的响应性明显降低

Broken Example-单击任何按钮以显示内容时，它将停用页面上的所有其他按钮。但是，背景图像不会在我的机器上的动画后面跳动，并且页面的响应速度也不会降低。

我对我的解决方法感到满意（这不是一个商业项目，因此不存在抽搐问题），但是我对为什么position：属性以这种方式影响功能的情况感到非常好奇。有人吗？

Answer 1

您的按钮被position：固定的伪元素阻塞，为其指定位置：relative和z-index将其向上移动

function switchitem(id) {
  var x = document.getElementById(id);
  if (x.className.indexOf("item-wrap-hidden") != -1) {
    x.className = "item-wrap";
  } else {
    x.className = x.className.replace("item-wrap", "item-wrap-hidden");
  }
}

button.accordion {
  background-color: #333;
  color: #eee;
  position: relative;
  z-index: 1;
}

.active,
.accordion:hover {
  background-color: #666;
}

.item-wrap {
  overflow: hidden;
  z-index: 0;
  position: relative;
}

.item-wrap::after {
  overflow: hidden;
  content: "";
  background-image: url("page_background_image.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-attachment: fixed;
  background-size: cover;
  opacity: .8;
  filter: alpha(40);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: fixed;
  z-index: -1;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

.item-wrap-hidden {
  position: absolute;
  left: -999em;
}

<button onclick="switchitem('id')" class="accordion">Show / Hide Content</button>
<div id="id" class="item-wrap-hidden">
  <p>content that is hidden and revealed goes here</p>
</div>

Answer 2

您的::after位于整个屏幕上，因此您单击的是按钮而不是按钮。按钮位于::after下方。您可以通过消除不透明度来查看。

您可以添加

pointer-events:none;

到::after，因此实际上是在单击按钮。

div :: after与position：fixed中断站点

2 个答案: