javascript - 使用半透明组件切换覆盖 div

Question

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

• A) 无法点击(鼠标等无法访问)
• B) 看起来有点 ~0.3f 模糊(因为它是透明的前景)
• C) 使效果动态我的意思是使<div>被一些人掩盖/发现事件？

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

Answer 1

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

这可以通过使用各种 CSS positioning elements 来完成将两个 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 链接并编写最适合您具体尝试完成的代码。