为什么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

- David C

---

我的系统没有能够表示这个字符的字体，你能否也添加一个屏幕截图让我看看？听起来像是一个z-index问题（filter会创建一个堆叠上下文），但为了确保，在这种情况下，一个屏幕截图会有所帮助。 - Kaiido

Answer 1

尝试使用这个CSS：

span {
  z-index: 99;
}

- Saif

Answer 2

在您的.col span中添加

z-index:1;

并在以下内容中添加分号

left: 100px;

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

- VertexGames