在圖像的部分反轉顏色 - HTML，CSS，JS

Question

有沒有辦法只反轉圖像的一部分？我有一個「選擇欄」的東西，我想要選擇倒置的圖標。不幸的是，這看起來真的很糟糕當酒吧過渡到不同的選擇，因爲圖標會立即改變顏色。過渡時，「選擇器」應沿着酒吧滑動。

就是我說的簡單例子大約可以發現here

我可以想出現在最好的解決辦法是把選擇元素上一個新的，倒象和移動圖像相反選擇器正在移動的方向。這會產生錯覺，所覆蓋圖像的切片被倒置。這真的是最好的方式嗎？

Answer 1

創建一個零寬度和高度的元素，並且outline: 8px solid invert。然後用選擇器移動這個元素，這會反轉它傳遞過來的東西。