我在<label>标记上有一个伪类，用于在检查选项时显示检查。它通过定位来完成所有这些疯狂的事情，将所有伪元素扔到顶部角落，甚至在悬停时显示两个相同的::after元素。
我最终发现我在filter: brightness(.9)上有:hover，但是在基础filter: brightness CSS上没有<label>。将filter: brightness(1)添加到基本元素后，问题就消失了。
Here is a fiddle。首先，将鼠标悬停在右上角的支票和蓝色按钮上，以查看问题。然后取消注释filter: brightness(1)行以查看修复。我把它弄得有点难看，所以这个问题很容易看到。
但是现在我挠头了。发生了什么事？好像没有filter一样，CSS忘记了哪个元素是父元素，而只是引用了最后一个非静态定位的元素。为什么会这样？还有其他情况吗？
答案 0 :(得分：2)
最初的问题是您的label丢失了
position: relative;
因为箭头是绝对的，所以箭头位于顶部，而不包含在按钮中。
向其中添加过滤器时，该元素将更改为一个包含块（这是过滤器的作用），因此其效果为position: relative，这就是为什么一切看起来正常的原因。
在您的小提琴中，当您将鼠标悬停时，它将应用过滤器，一旦发生这种情况，该过滤器又将元素更改为一个包含块（基本上是相对位置），复选标记将返回到按钮中的正确位置，但是现在没有再将鼠标悬停并返回右上角。只要您将鼠标悬停，它就会重复一次，这就是为什么它会闪烁