反转图像部分的颜色 - HTML、CSS、JS

Question

有没有办法只反转图像的一部分？我有一个“选择器栏”之类的东西，我希望被选中的图标被反转。不幸的是，当栏转换到不同的选择时，这看起来真的很糟糕，因为图标会立即改变颜色。 “选择器”应在过渡时沿栏滑动。

可以在here找到我正在谈论的简单示例

我现在能想到的最佳解决方案是在选择器元素上放置一个新的反转图像，然后将图像移动到选择器移动的相反方向。这会给人一种错觉，即所覆盖的图像切片是倒置的。这真的是最好的方法吗？

Answer 1

创建一个宽度和高度为零的元素，以及outline: 8px solid invert。然后用你的选择器移动这个元素，这将反转它传递的东西。