第

Question

我正在尝试构建媒体查询，并且由于某种原因，当我的鼠标悬停在页面上的任何位置时，页面正在创建阴影。它只在桌面上进行，窗口缩小到640或更低的视口。

我指的是蓝色容器下的阴影线：

可以在以下网址看到：

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);
}

禁用或覆盖它以删除盒阴影效果