Question

我创建了一个透明的叠加层，允许用户点击叠加层上及其后面的某些区域。

在右上角有一个切出的部分应该显示背景并允许点击它背后的元素。在叠加层上还应该有文本，用户可以单击该文本来触发onclick事件。

我试图嘲笑这件事，但我遇到了问题。如何制作背景以便可以通过圆圈点击背景以及在叠加层上点击文字？

我试图在叠加层上使用点事件：无法让我在后台点击一切但我只想让用户点击右上方和/或文字上的曝光区域。我需要将叠加层保持在z-index为5，以便它覆盖页面上的所有内容。

＆＃13;

.overlay {
  height: 100%;
  width: 100%;
  z-index: 5;
  position: fixed;
  background-color: blue;
  opacity: 0.95;
  top: 0;
  left: 0;
}


.circle-container {
  width: 40%;
  height: 40%;
  position: relative;
  float: right;
}


.circle {
  width: 100%;
  height: 100%;
  min-width: 50px;
  min-height: 50px;
  position: absolute;
  overflow: visible;
  float: right;
}


.circle:before {
  content: '';
  position: absolute;
  top: -28%;
  width: 100%;
  right: -10%;
  height: 100%;
  border-radius: 100%;
  box-shadow: 0px 500% 0px 500% #448CCB;
  background: #FFF;
}


.text-container {
  width: 50px;
  float: right;
  top: -55%;
  right: -5%;
}

＆＃13;

<p>
  some stuff on the background of the body to see
</p>

<div class="overlay">
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="text-container">
    <p class="text">Some text here</p>
  </div>
</div>

＆＃13;

在叠加部分的下方创建元素可点击但不是全部

0 个答案: