html - 页面出现阴影

Question

我正在尝试构建一个媒体查询，但出于某种原因，当我的鼠标悬停在页面上的任何位置时，页面会产生阴影。它仅在桌面上进行，窗口缩小到 640 或以下的视口(viewport)。

我指的是蓝色容器下的这条阴影线:

这可以在以下位置看到:

http://optimumwebdesigns.com/contact

我相信原因是我有一个容器，contact_arrow_box。它的代码是这样的:

.contact_arrow_box {
    position: relative;
    background: #88b7d5;
    width: 50%;
    height: 100%;
    float: right;
}
.contact_arrow_box:after, .contact_arrow_box:before {
    right: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.contact_arrow_box:after {
    border-color: rgba(136, 183, 213, 0);
    border-right-color: #88b7d5;
    border-width: 30px;
    margin-top: -30px;
}
.contact_arrow_box:before {
    border-width: 36px;
    margin-top: -36px;  
}

我对此容器的媒体查询更改:

.contact_arrow_box {
    width: 100%;
    height: auto;
}
.contact_arrow_box:after, .contact_arrow_box:before {
    top: 100%;
    left: 50%;
}
.contact_arrow_box:after {
    border-width: 30px;
    margin-left: -30px;
}
.contact_arrow_box:before {
    border-width: 36px;
    margin-left: -36px;
    margin-top: 0;
}

有人知道这是什么原因吗？

Answer 1

这是罪魁祸首

.no-touch:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
}

禁用或覆盖它以移除框阴影效果