css - 为什么 CSS 灰度滤镜会隐藏其他页面元素？

Question

下面的代码显示了三列，每列之间有一个箭头。

将鼠标悬停在第一列上 - 可以看到箭头。

将鼠标悬停在第二列或第三列上 - 箭头消失。为什么会消失？

.col {
  background: #acf;
  border: 1px solid #666;
  display: table-cell;
  width: 125px;
  height: 200px;
}

.col span {
  color: #f00;
  font-size: 3em;
  position: relative;
  top: 80px;
  left: 100px
}

.col:hover {
  filter: grayscale(50%)
}

<p class="col"><span>&#129094;</span></p>
<p class="col"><span>&#129094;</span></p>
<p class="col">&nbsp;</p>

https://codepen.io/d-c/pen/rNxyrqz

Answer 1

试试这个 CSS:

span {
  z-index: 99;
}