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

【问题标题】：Why does the CSS grayscale filter hide other page elements?为什么 CSS 灰度滤镜会隐藏其他页面元素？
【发布时间】：2020-06-22 14:42:19
【问题描述】：

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

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

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

.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

【问题讨论】：

我的系统没有能够代表这个字符的字体，你能把你看到的截图加一下吗？听起来这是一个 z-index 问题（filter 确实创建了一个堆叠上下文），但要确保在这种情况下截图会有所帮助。

标签： css filter grayscale

【解决方案1】：

试试这个 CSS：

span {
  z-index: 99;
}

【讨论】：

【解决方案2】：

添加

z-index:1;

到您的 .col 范围

并添加分号

左：100px；

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

【讨论】：