指针事件：无；不工作答案

【问题标题】：pointer-events: none; Not working指针事件：无；不工作
【发布时间】：2017-10-24 15:49:44
【问题描述】：

我所做的是在我的页面底部创建了一个透明的 div，它与页面底部的固定 div 大小相同。当用户向下滚动时，固定 div 会显示在网站内容的其余部分下方。透明 div 位于固定 div 前面，因此用户无法点击固定 div 上的输入框等。

将pointer-events: none; 放在透明 div 上应该允许用户单击它，但不幸的是这并没有解决我的问题。我尝试制作透明和固定的 div display: block 或 display: inline-block，但这些都没有解决我的问题。

//empty transparent div
.section.empty-section {
  height: 459px;
  pointer-events: none;
  display: inline-block;
}

//contact form under the transparent div
.section.footer {
  background: #131313;
  position: fixed;
  bottom: 0;
  z-index: -1;
}

.section {
  position: relative;
  padding: 10 10 10 10;
  left: 0;
  width: calc(100% - 20px);
  color: white;
  font-family: "Gadugi";
  overflow: hidden;
  background-size: contain;
  background-repeat: no-repeat;
  background-blend-mode: soft-light;
}

<div class="section empty-section"></div>
<div class="section footer">
  <span class="heading">Contact</span>
  <form action="contact.php" method="POST">
    <label>Your email address</label>
    <br>
    <input type="email" name="from-email-address">
    <br>
    <br>
    <label>Your name</label>
    <br>
    <input type="text" name="from-name">
    <br>
    <br>
    <label>Your message</label>
    <br>
    <textarea class="email-textbox" name="email-message"></textarea>
    <br>
    <button class="send-button">Send Email</button>
  </form>
</div>

https://gyazo.com/83c3f870aa8c0775ca24cf08de71adcf这是我的页面的gif，底部的表单不可点击。

【问题讨论】：

这可能只是因为您将z-index 设置为-1。 body 和 html 元素正在捕获您的点击事件。
我将指针事件设置为无，所以我应该能够点击 div 对吧？
您是，但您没有点击body 或html。这些元素捕获事件并在您的表单之上。表单被设置为“低于”<html> 和 <body>，因为它们是 z-index: -1。

标签： css html pointer-events

【解决方案1】：

检查下面的代码。我相信这就是您正在寻找的。p>

body{
    margin: 0;
}
.section.empty-section {
  height: 459px;
  display: block;
  z-index: 10;
  background: red;
  width: 100%;
}

.section.footer {
  background: #131313;
  position: fixed;
  bottom: 0;
  z-index: 1;
}

.section {
  position: relative;
  padding: 10 10 10 10;
  left: 0;
  width: calc(100% - 20px);
  color: white;
  font-family: "Gadugi";
  overflow: hidden;
  background-size: contain;
  background-repeat: no-repeat;
  background-blend-mode: soft-light;
}

<div style="height: 1500px">
<div class="section empty-section"></div>
<div class="section footer">
  <span class="heading">Contact</span>
  <form action="contact.php" method="POST">
    <label>Your email address</label>
    <br>
    <input type="email" name="from-email-address">
    <br>
    <br>
    <label>Your name</label>
    <br>
    <input type="text" name="from-name">
    <br>
    <br>
    <label>Your message</label>
    <br>
    <textarea class="email-textbox" name="email-message"></textarea>
    <br>
    <button class="send-button">Send Email</button>
  </form>
</div>
</div>

【讨论】：

那没有解决，抱歉
所以你想让你的表单在你向下滚动到透明的 div 之前不能被点击？
正确，我只是希望透明 div 没有指针事件，但由于某种原因添加“指针事件：无”什么都不做。
当您说指针事件时，您究竟是什么意思？因为在我发送给您的代码中，该透明 div 上没有指针事件，并且您在滚动过去之前无法编辑表单。还是要隐藏鼠标光标？
检查我放在主帖中的 gyazo 链接，它是我在页面上上下滚动的 gif，它应该让你明白你的意思。指针事件也控制你是否可以“点击”一个 div。

【解决方案2】：

我让它工作了。我记得以前尝试过这种效果，所以我尝试重新创建它，结果我上次使用页脚标签而不是 div 作为联系表单，所以我只是将其更改为页脚并更改了类名等，现在它可以工作了.谢谢。

【讨论】：