css - 为什么 CSS 灰度滤镜会隐藏其他页面元素?
问题描述
下面是显示三列的代码,每列之间有一个箭头。
将鼠标悬停在第一列上 - 可以看到箭头。
将鼠标悬停在第二或第三列上 - 箭头消失。为什么会消失?
.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>🡆</span></p>
<p class="col"><span>🡆</span></p>
<p class="col"> </p>
解决方案
试试这个 CSS:
span {
z-index: 99;
}