覆盖 box-shadow 伪元素阻止 child 上的悬停事件

Question

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

.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/

覆盖 box-shadow 伪元素阻止 child 上的悬停事件

Overlayed box-shadow pseudoelement prevents hover event on child

css

pseudo-element

box-shadow