Advanced use of :hover in css. Is it possible to interact with other DOM tree elements?

Question

css

Started experimenting with the :hover property in css and ran into a problem.
Suppose there is such a layout - //jsfiddle.net/xvscv15c/
Task: when you hover over a red square, the rest of the squares should disappear.
Superficial reading of the documentation and googling did not satisfy me.
Is it possible to interact with other elements of the tree house (by analogy i:hover:after {...}). If not, why not?
PS do not suggest using JS.

Answer 1

you can do it a little differently:
jsfiddle.net/xvscv15c/2