javascript - 切换覆盖具有半透明组件的 div

Question

我想知道如何<div>用一些有用的 HTML 组件/图像覆盖 a 来制作<div>：

• A）不可点击（鼠标等无法访问）
• B）看起来有点〜0.3f模糊（因为它是透明的前景）
• C）使效果动态我的意思是使<div>某些事件覆盖/未覆盖？

所以我的问题是：用 HTML、CSS 和 Javascript 制作前面提到的效果的最佳方法是什么？

Answer 1

(A) 使 div “无法点击（鼠标等无法访问）”

这可以通过使用各种CSS 定位元素将两个 div 放置在完全相同的位置来实现。然后将一个 div 堆叠在另一个上，使用z-index（较高的元素z-index将堆叠在较低的元素的顶部z-index）。例如：

HTML：

<div id="div1">
    <a href="#">Link</a>
</div>
<div id="div2"></div>

CSS：

#div1, #div2 {
    width: 50px;
    height: 50px;
    top: 0;
    left: 0;
    position: fixed;
}

#div2 {
    z-index: 1;
}

---

(B) 使 div “看起来有点 ~0.3f 模糊（因为它是透明的前景）”

为此，您将使用 CSS opacity。例如：

#div2 {
    opacity: .3;
}

---

（C）“使效果动态我的意思是使某些事件被覆盖/未被覆盖。”

您可以使用 Javascript 完成此操作。最简单的方法可能是使用document.getElementById添加display:none到要删除的 div 中。

<script>
  document.getElementById('div2').style.display = 'none';
</script>

---

注意：这些不是完成此任务的唯一方法。我只是想给你一个起点。我建议查看我发布的 MDN 链接并编写最适合您具体尝试完成的代码。