Question

我有一个部分透明背景的父元素。此元素中有一个子元素。我需要在父元素的背景中显示子元素，所以我将z-index：-1设置为子元素。

这是一个codepen示例：https://codepen.io/anon/pen/xpVbPa

灰色方块是子元素。我需要处理点击它。怎么做？我试图在父元素上设置pointer events: none，但它不起作用。

Answer 1

使用带背景的伪元素并向其添加pointer-events: none。

＆＃13;

function childClick() {
  alert('click!');
}

＆＃13;

.parent {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  padding: 50px;
  position: relative;
}

.parent:after {
  content: '';
  background: url(https://image.ibb.co/fAYr5R/585e4ad1cb11b227491c3391.png);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.child {
  width: 150px;
  height: 150px;
  background-color: gray;
  cursor: pointer;
  position: absolute;
}

＆＃13;

<div class="parent">
  <div class="child" onclick="childClick()"></div>
</div>

＆＃13;

Answer 2

解决此类问题的原则是没有.child的父级背景，而是兄弟姐妹的背景：

function childClick() {
  alert('click!');
}

.parent {
  position:relative;
}
.frontground {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  padding: 50px;
  pointer-events: none;
  position: relative;
  background: url(https://image.ibb.co/fAYr5R/585e4ad1cb11b227491c3391.png)
}
.child {
  width: 150px;
  height: 150px;
  background-color: gray;
  cursor: pointer;
  position: absolute;
  margin: 50px;
}

<div class="parent">
  <div class="child" onclick="childClick()"></div>
  <div class="frontground"></div>
</div>

在你的情况下，兄弟姐妹实际上可能是一个伪元素，但这可能并不总是可能。

Answer 3

更新您的CSS。将背景设置为子级:after

.child:after{
  width: 150px;
  height: 150px;
  background-color: gray;
  position: absolute;
  cursor: pointer;
  content:"";
  z-index: -1;
}
.child {
  width: 150px;
  height: 150px;
}

点击具有负z-index的元素的事件

3 个答案: