Hacker News Reader

Comment by rnnr | Hacker News Reader

The irony here is that this kind of styling used in this devtools example(hovering over one element, highlighting another), cannot be done by css itself.

View on HN

Here is a horrible hack with a hidden input https://codepen.io/bushyn/pen/pwwXXY

Next-sibling selectors (+) are not a hack. No reason to do this with an input, any element will do.

No, next-sibling selector was not the point. You need that label+input combo to do something like in the video using only css https://codepen.io/bushyn/pen/owevJO

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).

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; }

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.

Not entirely true, below is the adjacent sibling example (+).

It's true you can't highlight an arbitrary element by hovering/focusing on another element.

Reply on news.ycombinator.com