我正在创建一个扩展，它应该显示一个覆盖并突出显示光标所在的元素。当覆盖可见时，用户应该无法与页面交互（按钮，链接等不应该工作）。
代码：

let overlay = document.createElement("div");
overlay.setAttribute("class", "as-overlay");

let panel = document.createElement("div");
panel.setAttribute("class", "as-root");
panel.setAttribute("id", "as-panel");
overlay.appendChild(panel);
document.body.appendChild(overlay);

____

.as-overlay {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom:0px;
  z-index: 99999;
  cursor: default;
  pointer-events: none !important;
  background-color: rgba(0, 0, 0, 0.8);
}

我将pointer-events设置为none，以禁用交互。但它不起作用。我做错了什么吗？（我已经确保覆盖层具有完整的宽度和高度，并且它的z-index足够高，以便它在所有内容之上呈现。）
如果能提供一些帮助，我会非常感激，我已经在这个问题上花了很长时间了，某个大型语言模型没有任何帮助;-;
编辑：我添加了一个example。理想情况下，你会期望点击按钮或链接不做任何事情，因为覆盖在那里。但点击它们的工作，我只是不明白为什么。