在图像的一部分中反转颜色 - HTML，CSS，JS

Question

Is there a way to invert only part of an image? I have a "selector bar" sort of thing, and I want the icon that's selected to be inverted. Unfortunately, this looks really bad when the bar is transitioning to a different selection, as the icon immediately changes color. The "selector" should slide along the bar while transitioning.

Simple example of what I'm talking about can be found here

The best solution I can come up with right now is to put a new, inverted image on the selector element, and move the image the opposite direction the selector is moving. That would give the illusion that the slice of the image that's covered is inverted. Is that really the best way to do it?

Answer 1

Create an element with zero width and height, and outline: 8px solid invert . Then move this element around with your selector, and this will invert the stuff that it passes over.