CSS响应六边形网格 - IE悬停问题

Question

我创建了一个基于此笔的网页：

https://codepen.io/onediv/pen/JGmgK（不知道这里的代码有多大帮助，但我被告知要复制并粘贴它！）

#lab {
    width: 1000px;
    overflow: hidden;
    padding-bottom: 70px;
    position: relative;
    margin: 0 auto;
    margin-bottom: 2.5em;
    background: rgb(236, 236, 236);
    -webkit-transition: all ease 500ms;
    -moz-transition: all ease 500ms;
    -o-transition: all ease 500ms;
    -ms-transition: all ease 500ms;
    transition: all ease 500ms;
}
h1 {
    font-family: bebas_neueregular ,sans-serif;
    font-size: 1.75em;
    padding: 0.2em 0 0.2em 0.2em;
    color: white;
    text-shadow: 0 0.06em 0 #424242;
    position: relative;
}
#lab h1 {
    background: #B0DAD4;
}
.beaker {
    -webkit-filter: drop-shadow(#424242 0px 1px 0px);
    border-bottom: 2em solid #FFF;
    border-left: 1em solid transparent;
    border-right: 1em solid transparent;
    border-radius: .5em;
    height: 0;
    width: 1em;
    position: absolute;
    right: 0.7em;
    bottom: 22%;
    font-size: 0.6em;
}
.beaker::before {
    border-left: .25em solid #FFF;
    border-radius: .25em;
    border-right: .25em solid #FFF;
    content: '';
    height: .25em;
    left: -.25em;
    position: absolute;
    top: -1em;
    width: 1em;
}
.beaker::after {
    border-left: .25em solid #FFF;
    border-right: .25em solid #FFF;
    content: '';
    height: 1em;
    left: 0;
    position: absolute;
    top: -1em;
    width: .5em;
}
.sectionheader {
    position: relative;
}
.lab_item {
    width: 200px;
    height: 230px;
    position: relative;
    display: inline-block;
}
.hexagon2 {
    position: absolute;
    width: 200px;
    height: 400px;
    top: -85px;
}
.hexagon {
    overflow: hidden;
    visibility: hidden;
    -webkit-transform: rotate(120deg);
    -moz-transform: rotate(120deg);
    -o-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    transform: rotate(120deg);
    cursor: pointer;
}
.hexagon-in1 {
    overflow: hidden;
    width: 100%;
    height: 100%;
    -webkit-transform: rotate(-60deg);
    -moz-transform: rotate(-60deg);
    -o-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    transform: rotate(-60deg);
}
.hexagon-in2 {
    -webkit-box-shadow: inset 0 0 0 200px rgba(176, 218, 212, 0.48);
    box-shadow: inset 0 0 0 200px rgba(176, 218, 212, 0.48);
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 50%;
    -webkit-background-size: 125%;
    -moz-background-size: 125%;
    background-size: 125%;
    visibility: visible;
    -webkit-transform: rotate(-60deg);
    -moz-transform: rotate(-60deg);
    -o-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    transform: rotate(-60deg);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.hexagon-in2:hover {
    -webkit-box-shadow: inset 0 0 0 0px #B0DAD4;
    box-shadow: inset 0 0 0 0px #B0DAD4;
}
#lab article {
    padding-top: 1em;
    width: 820px;
    margin: 0 auto;
}
.lab_item:nth-child(7n-2) {
    margin-left: 101px;
}
.lab_item:nth-child(n+5) {
    margin-top: -55px;
}
@media (max-width: 1015px) {
    #lab {
    width: 100%;
}
}
@media (max-width: 820px) {
    .lab_item:nth-child(5n-1) {
    margin-left: 102px;
}
.lab_item:nth-child(n+4) {
    margin-top: -62px;
}
.lab_item:nth-child(7n-2) {
    margin-left: 0px;
}
.lab_item:nth-child(n+5) {
    margin-top: -56px;
}
#lab article {
    width: 610px;
}
}
@media (max-width: 640px) {
    #lab article {
    width: 405px;
}
.lab_item:nth-child(5n-1) {
    margin-left: 0px;
}
.lab_item:nth-child(3n) {
    margin-left: 102px;
}
.lab_item:nth-child(n+3) {
    margin-top: -56px;
}
}
@media (max-width: 450px) {
    #lab article {
    width: 300px;
}
.lab_item:nth-child(3n) {
    margin-left: 0px;
}
.lab_item:nth-child(2n) {
    margin-left: 102px;
}
.lab_item:nth-child(n+2) {
    margin-top: -56px;
}
}

除了IE之外，它看起来都很棒，其中下一行六边形的悬停状态在第一行六边形的内容中很好地开始。它可能会在六边形内容的整个范围内盘旋，即使它不可见。此笔存在同样的问题：https://codepen.io/web-tiki/pen/HhCyd

有人可以帮忙解决这个悬停问题吗？是否有可能通过z-indexing相应的六边形来解决所以每个六边形位于另一个之上，或者是否存在IE特定的解决方案？它适用于Chrome和FireFox。