Search code examples
csspseudo-elementbox-shadow

Overlayed box-shadow pseudoelement prevents hover event on child

Here's my fiddle.

Basically I have a parent div that needs to have a box shadow around it and for various reasons this box shadow has to be a pseudoelement. This box shadow prevents the capture of hover events on the children of this parent div. How can I fix this?

.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;
}
Solution 
  • .big-box:after{
pointer-events: none;
}

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