css - 覆盖框阴影伪元素防止悬停事件发生在 child 身上

Question

Here's my fiddle.

基本上我有一个父 div，需要在它周围有一个框阴影，由于各种原因，这个框阴影必须是一个伪元素。此框阴影会阻止捕获此父 div 的子项上的悬停事件。我该如何解决这个问题？

.box {
    float: left;
    width: 200px;
    height: 200px;
    color: #fff;
    background-color: lightblue;
    position: relative;
}

.big-box {
    float: left;
    position: relative;
}

.big-box:after {
    content: "";
    box-shadow: inset 0px 0px 10px 0px #000;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 5;
    width: 100%;
    height: 100%;
}

.box:hover {
    background-color: green;
}

Answer 1

.big-box:after{
pointer-events: none;
}

https://jsfiddle.net/tm9pzudy/1/