[extra88]

Sorry, I didn't get that your example was trying to not just take advantage of the next sibling selector but also the relationship between inputs and their labels, which don't have to be close to each other in the DOM. I can see why you'd call it a "hack."

However, in the Pen, all I'm seeing is the square over which I hover turns purple. That is, .item:hover { background: blueviolet; } does what it's supposed to and that's it. I get the impression that what you expect to happen is hovering over box #1 in .grid will also change the background of box #1 in .grid2, but it doesn't. I tried it in Chrome and in Safari 10.1.1.

I assume this is because A) hovering over a label is not equivalent to hovering over its associated input and B) you can't hover over an element set to display: none; (as input is).

[extra88]

Interesting! I got it to work. Turns out hovering over a label can be equivalent to hovering over its associated input, the problem was input { display: none;}. I changed the input declaration like so and it started working:

input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

[extra88]

Part of the horribleness of this label - input hack is while the semantics of those elements may not be apparent visually, they are very apparent and intrusive to a screenreader user.