html - 单击元素后面的按钮

Question

我有一个位于 div 中的按钮，它位于另一个 div 的后面。第二个 div 使用 css 与第一个 div 重叠:position: absolute;

因此该按钮不可点击。有什么方法可以让它像普通按钮一样可点击吗？

示例:jsfiddle

body {
  background-color: blue;
}

.stack {
  width: 320px;
  height: 240px;
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: white;
  margin-top: -120px;
  margin-left: -160px;
}

.background {
  width: 320px;
  height: 240px;
  background-image: url('http://www.userlogos.org/files/logos/ps1d3r/apple-black-i.png');
  top: 0px;
  left: 0px;
  position: absolute;
}

.card {
  pointer-events: none;
  width: 320px;
  height: 240px;
  background-image: url('http://2.bp.blogspot.com/-OIHQM4x8l0U/UEiDLQyiTRI/AAAAAAAAHFs/i1a6rkqQ8tQ/s320/floral+swirl.png');
  top: 0px;
  left: 0px;
  position: absolute;
}

<div class="stack">
  <div class="background" onclick="alert('background clicked');">
    <button onclick="alert('bg-button clicked');" style="left:65px; top:65px; position: absolute;">This is a background button</button>
    <div class="card">
      <button onclick="alert('card-button clicked');">This is a card button</button>
      <textarea style="left:100px; top:100px; position: absolute;">This is a card textarea</textarea>
    </div>
  </div>
</div>

Answer 1

您可以在 .card 上使用 pointer-events:none;。这将禁用 .card div 上的点击事件，用户可以点击它后面的按钮。 More info here (MDN) .

这是一个示例，展示了如何在隐藏在另一个元素后面的元素上启用点击事件:

button {
  margin: 50px;
}

button:focus {
  background: red;
}
button:hover {
  background: teal;
}

.inFront {
  pointer-events: none;
  position: absolute;
  top: 25px; left: 25px;
  right: 25px; height: 150px;
  border: 3px solid red;
  background: rgba(0, 0, 0, .5);
}

<button onclick="alert('button clicked');">I am a button behind the .inFront div</button>
<div class="inFront"></div>

在此示例中，.inFront div 位于按钮上方，但 div 上的 pointer-events: none; 属性允许按钮被单击、聚焦和悬停。

---

关于您的示例，缺点是它还会禁用文本区域和“卡片按钮”，因此您必须更改 HTML 并将文本区域和卡片按钮移出 .card div 所以他们仍然可以点击。这是一个演示:

DEMO