Z-index 防止项目被点击

Question

我有一个带有插入阴影的容器 div，我在这个容器中也有子元素，我只希望这些子元素可以点击。

将子元素（我项目中的图像，不确定是否重要）元素的 z-index 设置为 -1 对于投影显示至关重要。但是这样做容器会覆盖子元素，所以点击不起作用。

设置指针事件：none；在容器元素上也没有帮助（我也希望容器可以滚动）。

$('.item').on('click', function() {
  alert($(this).attr('id'));
});

    .container {
      position: absolute;
      width: 250px;
      height: 250px;
      border-radius: 50%;
      box-shadow: inset 0 0 10px black;
      overflow-y: scroll;
      overflow-x: hidden;
    }
    .item {
      width: 250px;
      height: 80px;
      margin: 3px 0;
      background-color: #cacaca;
      position: relative;
      text-align: center;
      z-index: -1;
      /*Shadow visible, JS doesn't work*/
      /*z-index: 0;*/
      /*Clickable, but shadow is covered */
    }

<div class="container">
  <div class="item" id="item1">
    <p>CLICK</p>
  </div>
  <div class="item" id="item2">
    <p>CLICK</p>
  </div>
  <div class="item" id="item3">
    <p>CLICK</p>
  </div>
  <div class="item" id="item1">
    <p>CLICK</p>
  </div>
</div>

JSFiddle

如何保留阴影，并使子元素可点击？

Answer 1

为什么会这样

发生这种情况的原因是因为带有 class .item 的 div 在 .container 后面，这意味着用户实际上是在单击 .container，不是 .item.

解决方案

您可以像这样用包装器包装您的 div：

<div class="container">
    <div class="item" id="item1">
        <div><p>CLICK</p></div>
    </div>

    <div class="item" id="item2">
        <div><p>CLICK</p></div>
    </div>    

    <div class="item" id="item2">
        <div><p>CLICK</p></div>
    </div>

    <div class="item" id="item3">
        <div><p>CLICK</p></div>
    </div>
</div>

并将您的 CSS 从 .item 更新为 .item > div [但保留 JS 原样]

这样，外面的 .item 仍然在 .container 前面，里面的 div 在 .container 后面，这意味着它仍然可以点击，你得到您想要的造型！

证明有效！

检查以下 JS Fiddle：https://jsfiddle.net/anik786/5oe841sw/6/

截图如下：

Z-index 防止项目被点击

Z-index prevents item to get clicked

css

jquery

z-index

dropshadow

为什么会这样

解决方案

证明有效！