Html 我怎样才能摆脱div元素边缘的这些神秘的灰色方框？

我有一个昨天不存在的神秘问题（你知道吗？）。由于某些原因，当用户将鼠标悬停在其父元素上时，这些灰色框会出现在元素的边缘。它们出现在右侧和底部。实际上，支票和x图像下面的所有内容都是一个div，其类为

.bottom

。我已设置为父级高度的

50%

，宽度的

100%

。这些都是反应成分，所以可能有点难以理解。

EventDetail

组件嵌套在

Event

组件中

.eventcontainer{
填充物：5px；
宽度：960px；
保证金：20px自动；
}
.事件{
利润率最高：2%；
宽度：960px；
边框颜色：#496DD9；
边框样式：虚线；
字体大小：0.5em；
高度：300px；
位置：相对位置；
-webkit过渡：高度300ms放松；
}
.事件：悬停{
高度：400px；
-webkit过渡：高度300ms，易于安装；
}
.事件：悬停.隐藏{
显示：块；
不透明度：1；
-webkit过渡：不透明度300毫秒，在200毫秒内缓解；
}
.隐藏{
不透明度：0；
溢出：滚动；
-webkit过渡：不透明度100毫秒缓解；
}
.底部{
位置：绝对位置；
底部：0；
垫底：2%；
左：2%；
字体大小：13px；
宽度：100%；
身高：50%；
}

它们是滚动条，呸！但如果有人偶然发现了这个线索，这里有一个滚动条样式生成器