I want to point out before you read this answer that I am an engineer on the Internet Explorer team.
First of all, this is a really cool discovery. What you stumbled into is actually a “feature” (possibly a bug) of Internet Explorer that doesn't seem to exist in Chrome or Firefox. Let me try to figure out what happens, why it's pretty cool, and what you can do to avoid complications with it:
Labels and input elements can be linked using the [for] attribute in the label , pointing to the [id] attribute in the input element. As a result, when you click on a label, it can switch the checkbox or apply focus to the input field. This feature is often used to create advanced radio buttons, etc.
In the corresponding note, when you hover over the label , the associated input element also hangs. This applies to Internet Explorer, Firefox, Chrome and almost everyone else. But what Internet Explorer does differently applies a bi-directional tilt. Therefore, if you hover over the associated input control, Internet Explorer also calls :hover in the corresponding label .
Everything is getting cool here . This allows us to create relationships like the one below:
Note that the relationship is bidirectional, which means that any hover over input is not just a hover on itself and its family tree, but also a hover on its associated label . And any hover over the label is a hover over yourself, your family tree, and the input associated with it. This brings us closer to understanding what you play in your demo and why you see such strange results.
When you hover over an element, you also close its parents. As an example, suppose there was a div with a button inside it. Any hover over the button is essentially a hang on the parent div . You cannot reach children without first passing the parents to the cursor. The same rule applies here; when a shortcut or input freezes, just like its parents.
In your demo, you have a series of div elements with select and label elements inside. You base styles for select elements on the hover pseudo-class of your div parent. Therefore, when you hover over select , it causes its associated label to hang, which causes its parent to hang, which affects the styles of any nested select .
Follow up offer
While the [for] attribute allows label elements to be placed almost anywhere, you should only continue to do so with a special understanding of how this will affect selectors working outside of the :hover tree tree propagation.
Before giving a complete solution, I must ask why you put an empty label in a seemingly arbitrary place in the first place. What visual effect are you trying to achieve? I suspect that we could do the same visual layout with different layouts.
Next from here
I am going to open an error in this in our internal database, because I feel that this is not completely deliberate on our part. Our goal, I believe, is to view the behavior equally bi-directionally, and not handle the two routes differently.