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

添加

z-index:1;

到你的.col span

并在

中添加分号

left: 100px;

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

Answer 2

试试这个 CSS:

span {
  z-index: 99;
}

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

Why does the CSS grayscale filter hide other page elements?

css

filter

grayscale