Question

我尝试创建一个演示这种情况的最小代码段。以下HTML / CSS创建两个框，一个红色，一个青色。每个包含一个可点击的链接。当我应用CSS过滤器时（就像我创建青色过滤器一样），该框不再可点击。我最好的猜测是，这与“堆叠上下文”有关，但我承认我对它们知之甚少。

对于问题的第二部分，解决这个问题，有什么方法可以修改filtered类的CSS来避免这个问题？我在Chrome扩展程序的上下文中遇到了这种情况，它将CSS过滤器应用于图像，所以我想要一个不需要修改网站底层结构（HTML）或显着改变网站外观的解决方案。如果有一个可以通过编程方式应用的解决方案而不会引入其他网站现在表现不正确的风险，我会认为它特别有用。

.filtered {
  filter: invert(100%);
}

/* I cannot modify any of the following CSS to solve this. */

div, a {
  display: block;
  height: 50px; width: 50px;
  left: 0; top: 0;
  position: absolute;
}

.outer:before {
    display: block;
    height: 50px; width: 50px;
    left: 0px; top: 0;
    position: absolute;
    content: '';
    z-index: 2;
}

.inner {
    background: red;
}

.link {
    z-index: 2;
}

<div style="position: relative">
  <div class="outer">
    <div class="inner">
      <a href="http://example.com" class="link"></a>
    </div>
  </div>
</div>
<div style="position: relative">
  <div class="outer">
    <div class="inner filtered">
      <a href="http://example.com" class="link"></a>
    </div>
  </div>
</div>

Answer 1

您应该将z-index元素的.filtered设置为高于z-index伪类的:before：

.filtered {
  filter: invert();
  z-index: 10;
}

.filtered {
  filter: invert();
  z-index: 10;
}

/* I cannot modify any of the following CSS to solve this. */

div, a {
  display: block;
  height: 50px; width: 50px;
  left: 0; right; 0; top: 0; bottom: 0;
  position: absolute;
}

.outer:before {
    display: block;
    height: 50px; width: 50px;
    left: 0px; right: 0px; top: 0; bottom: 0;
    position: absolute;
    content: '';
    z-index: 2;
}

.inner {
    background: red;
}

.link {
    z-index: 2;
}

<div class="outer">
  <div class="inner filtered">
    <a href="http://example.com" class="link"></a>
  </div>
</div>

为什么应用CSS过滤器阻止包含的链接？我可以解决这个问题吗？

1 个答案: