如何在此元素中使用滤镜css属性弹出窗口使背景保持白色？

Question

如何在此元素中使用滤镜css属性弹出窗口使背景保持白色？ 填充时需要保留内部白色，我不知道

现在

需要

.first{
  width: 200px;
  height: 50px;
  border: solid;
  background: white;
  
  
}

.first span{
    display: none;
  background: white;

  }

.first:hover{
    filter: brightness(55%);
 
  }
  
  .first span:hover{
      width: 100px;
  height: 25px;
  border: solid;
      display: block;
  }

<div class="first"> <span>alert</span></div>
<div class="first"><span>alert</span></div>

Answer 1

您可以使用这种样式

.first{
  width: 200px;
  height: 50px;
  border: solid;
  background: white;
}
.first span{
    display: none;
    background: white;
  }

.first:hover{
    background: #0000004f;
  }
.first:hover span{
    width: 100px;
    height: 25px;
    border: solid;
    display: block;
  }

Answer 2

无论何时使用过滤器，该元素的所有子代都将继承它。

要实现您想要的目标，您需要使其成为同级。这是一个示例：

HTML：

<div class="block">
<div class="block-filter"></div>
<span class="block-message">alert</span>
</div>

CSS：

.block {
    position: relative;
    width: 200px;
}
.block-filter {
    height: 50px;
    width: 100%;
    border: solid;
    background: white;
}

.block-message {
    display: none;
    background: white;
}

.block-filter:hover {
    filter: brightness(55%);
}
.block-filter:hover + span {
    filter: unset;
    position: absolute;
    top: 0;
    left: 0;
    border: solid;
    display: block;
    pointer-events: none;
    background: white;
}

https://codepen.io/diego-fortes/pen/vYBJoeP