叠加的box-shadow伪元素可防止在子

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/