跨度不在谷歌浏览器中呈现

Question

我的div背景图片包含span height和width 100%。我设置span有一个background-color: black opacity: 0。当div悬停时，span的不透明度会增加，以使背景图像变暗。我遇到的问题是，当我悬停时，跨度会根据需要覆盖整个div，但当我鼠标离开时span只覆盖div的一部分，有时从顶部，有时从底部。适用于Safari和Firefox。该问题仅适用于Chrome。

＆＃13;

＆＃13;

.covers span {
  display: block;
  height: 100% !important;
  width: 100%;
  opacity: 0.2;
  background: rgba(0, 0, 0, .7);
  -moz-transition: all 1s;
  -webkit-transition: all 1s;
  transition: all 1s;
}
.covers:hover span {
  opacity: 1;
}

＆＃13;

<div class="covers" id="cover-stories">
  <span></span>
</div>

＆＃13;

＆＃13;

＆＃13;