Is it possible to change the position of the mask with css?

Question

css

There are three divs (squares with a hole in the center) and a rectangle div whose area is equal to three squares. Is it possible to make it so that when you hover over any of the three squares, this rectangle moves? Now, if I hovered over the first square, then the rectangle completely covered it.
Pointed at the second square, the rectangle completely covered both the first and second squares. Is it possible to do this with just css?
And one offtopic question - do all modern browsers already support css masks on all platforms?

Answer 1

CSS masks are not very cross-browser friendly yet. Better pay attention to SVG masks. They are already quite everywhere and it is quite possible to animate them. More info:
https://developer.mozilla.org/en-US/docs/Web/SVG/T...
css.yoksel.ru/css-and-svg-masks