<div>
<select id="min-price">
<option>A</option>
</select>
</div>
<div>
<label for="min-price"></label>
<select>
<option>B</option>
</select>
</div>
这个CSS：
div {
padding: 1em;
margin-bottom: 1em;
border-bottom: 1px solid red;
}
div:hover {
background: #f1f1f1;
}
div:hover > select {
background-color: #a3a3a3;
}
示例可以在这里找到.
http://jsfiddle.net/0c67oew2/3/
有人解释为什么会这样吗？
解决方法
首先,这是一个非常酷的发现.您偶然发现的实际上是Internet Explorer的“功能”(很可能是一个错误),它似乎不存在于Chrome或Firefox中.让我试着打破对正在发生的事情的理解,为什么这很酷,以及你可以做些什么来避免它的复杂化：
标签和输入元素可以通过指向输入元素上[id]属性的标签上的[for]属性成为内在相关的.因此,当您单击标签时,它可以切换复选框,或将焦点应用于输入字段.此功能通常用于创建逐步增强的单选按钮等.
在相关的说明中,当您将鼠标悬停在标签上时,关联的输入元素也会悬停. Internet Explorer,Firefox,Chrome以及其他所有人都是这种情况.但是,Internet Explorer的不同之处在于应用悬停双向.因此,如果您将鼠标悬停在关联的输入控件上,Internet Explorer也会调用：悬停在相关标签上.
This is where things get cool.这使我们能够创建如下所示的关系：
请注意,这种关系是双向的,这意味着任何悬停在输入上的不仅仅是悬停在其自身及其祖先树上,而且还悬停在其关联的标签上.任何悬停在标签上的都是悬停在它自己,它的祖先树和它的相关输入上.这使我们更接近于了解您的演示中的内容,以及为什么您会看到如此奇怪的结果.
当你悬停一个元素时,你也会覆盖它的父母.举个例子,假设我们有一个带有按钮的div.任何悬停在按钮上的内容也固有地悬停在父div上.在光标方面,如果没有先通过父母,就无法找到孩子.同样的规则适用于此;当标签或输入悬停时,其父母也是如此.
在您的演示中,您有一系列div元素,其中包含select元素和标签元素.您正在为父div的hover伪类上的select元素设置样式.因此,当您悬停选择时,它会调用其关联标签的悬停,这会导致其父级的悬停,这会影响任何嵌套选择的样式.
随后的建议
虽然[for]属性允许您在任何地方放置标签元素,但您应该继续这样做,只有特别了解这将如何影响操作的选择器：悬停在祖先树上的传播.
在给出完整的解决方案之前,我必须先问一下为什么要在一个看似任意的位置放置一个空标签.你想要实现什么样的视觉效果？我怀疑我们可以用不同的标记完成相同的视觉布局.
从这里跟进
我将在我们的内部数据库中打开一个针对此错误的错误,因为我觉得这不是我们本身的故意.我认为,我们的目标是将行为视为双向行为,而不是以不同的方式处理这两条路线.
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
