删除子元素上的 CSS 过滤器

Ser*_*ili 6 css

我的 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;
}
Run Code Online (Sandbox Code Playgroud)
<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>
Run Code Online (Sandbox Code Playgroud)

dan*_*y74 7

执行此操作的唯一方法是恢复子级上的过滤器。

例如,如果父母有:

filter: invert(100%);
Run Code Online (Sandbox Code Playgroud)

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

filter: invert(100%);
Run Code Online (Sandbox Code Playgroud)

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

这样,过滤器将应用于除应用反向过滤器的子级之外的所有子级。

对于更复杂的过滤器组合,恢复更困难。首先,请查看此问题以获取更多信息:


Tak*_*Isy 5

你不能那样做。孩子会受到父母风格的影响。
这就是层叠样式表的工作原理。

我建议您使用伪元素使其按照您想要的方式工作,这样只有伪元素会受到影响。

请参阅片段中的评论:

.main {
  position: relative;   /* Added */
  width: 300px;
  height: 300px;
  list-style: none;
}

.main::before {   /* Added */
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: blue;
  transition: 0.5s;
}

.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; Commented */
}

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

.main:hover::before {   /* Modified */
  filter: brightness(50%);
}
Run Code Online (Sandbox Code Playgroud)
<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>
Run Code Online (Sandbox Code Playgroud)

希望能帮助到你。