css - 删除子元素上的 CSS 过滤器

Question

我的 CSS 代码有问题。

如您所见，我对 li 元素进行了过滤，但它覆盖了其他元素。我需要让其他两个元素没有过滤器:

有没有可能这样做。

.main {
  width:300px;
  height:300px;
  background-color:blue;
  list-style:none;
}

.button {
    position: absolute;
    top: 35% ;
    height: 30px;
    width: 120px;
    display: none;
    z-index: 99;
    background-color:black;
    color:white;
}

.icon {
    width: 30px;
    position: absolute;
    z-index: 99;
    display: none;
    width:100px;
}

.main:hover > .button {
    display: block;
    filter: none;
}

.main:hover > .icon {
    display: block;
    filter: none;
}

.main:hover {
    filter: brightness(50%);
    transition: 0.5s;
}

<li class="main">
<img src="https://help.seesaw.me/hc/en-us/article_attachments/204081043/bear.png" class="icon" />
<a class="button" href="#">Button</a>
</li>

Answer 1

做到这一点的唯一方法是恢复对 child 的过滤器。

例如，如果 parent 有:

filter: invert(100%);

然后将此过滤器应用于子项将反转效果:

filter: invert(100%);

请注意，如果您有多个过滤器，过滤器的顺序很重要!

通过这种方式，过滤器将应用于所有 child ，除了您应用反向过滤器的 child 。

.parent {
  filter: invert(100%);
}

.child, .no-parent-with-no-filters {
  width: 100px;
  height: 100px;
  border: 5px solid green;
  background-color: blue;
  float: left;
}

.child2 {
  filter: invert(100%);
}

<div class="parent">
  <div class="child child1">filter on parent</div>
  <div class="child child2">filter on parent but reverted</div>
  <div class="child child3">filter on parent</div>
</div>

<div class="no-parent-with-no-filters">no filters</div>

对于更复杂的过滤器组合，还原更加困难。首先，查看这篇文章了解更多信息:

Revert a filter invert() CSS rule

感谢耶稣我的救主而不是我 :)