Label :hover 属性在 IE10 和 IE11 中触发不正确的元素

Question

这有点奇怪，但请耐心等待。这仅影响 IE10 和 IE11，不影响 Chrome、FF、Safari 和 IE9 及更早版本。如果您有一个 <label> 用于嵌套在分配了 :hover 的类中的另一个元素，即使您没有将鼠标悬停在该元素上，它也会匹配该选择器。在下面的示例中，如果您将鼠标悬停在第一个 div 上，两个 divs 都会突出显示。

<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/

有人解释为什么会这样吗？

Answer 1

在您阅读此答案之前，我要说明我是 Internet Explorer 团队的工程师。

首先，这是一个真的很酷的发现。您偶然发现的实际上是 Chrome 或 Firefox 中似乎不存在的 Internet Explorer 的“功能”（很可能是错误）。让我试着打破对正在发生的事情的理解，为什么这很酷，以及你可以做些什么来避免它的并发症：

标签和输入元素可以通过label 上的[for] 属性指向input 元素上的[id] 属性而变得内在相关。因此，当您单击标签时，它可以切换复选框，或将焦点应用于输入字段。此功能通常用于创建渐进增强的单选按钮等。

在相关说明中，当您悬停在label 上时，关联的input 元素也会悬停。 Internet Explorer、Firefox、Chrome 和几乎所有其他人都是这种情况。但是 Internet Explorer 的不同之处在于应用了双向悬停。因此，如果您将鼠标悬停在关联的 input 控件上，Internet Explorer 也会在相关的 label 上调用 :hover。

This is where things get cool。这使我们能够创建如下所示的关系：

请注意，这种关系是双向的，这意味着在 input 上的任何悬停都不仅仅是在其自身及其祖先树上的悬停，而且也是在其关联的 label 上的悬停。 label 上的任何悬停都是悬停在其自身、其祖先树及其关联的 input 上。这让我们更接近于了解您的演示中发生了什么，以及为什么您会看到如此奇怪的结果。

当你悬停一个元素时，你也覆盖了它的父元素。例如，假设我们有一个div，里面有一个button。 button 上的任何悬停本质上也是父 div 上的悬停。就光标而言，如果不先通过父母，你就无法接触到孩子。同样的规则在这里适用；当标签或输入悬停时，其父项也是如此。

在您的演示中，您有一系列 div 元素，其中包含 select 元素和 label 元素。您将 select 元素的样式基于其父 div 的悬停伪类。因此，当您悬停select 时，它会调用其关联label 的悬停，这会导致其父级悬停，这会影响任何嵌套select 的样式。

后续建议

虽然[for] 属性允许您将label 元素放置在几乎任何地方，但您应该在这样做的前提下特别注意这将如何影响选择器操作关闭:hover 传播到祖先树。

在给出完整的解决方案之前，我必须先问一下，为什么您首先要在看似任意的位置放置一个空标签。你想达到什么样的视觉效果？我怀疑我们可以使用不同的标记完成相同的视觉布局。

从这里跟进

我将在我们的内部数据库中打开一个针对此的错误，因为我觉得这并非完全是我们故意的。我相信，我们的目标是双向处理相同的行为，而不是不同地处理两条路线。

Answer 2

我建议在处理表单输入时使用 :focus 而不是 :hover。造成这种情况的原因之一是，如果用户使用键盘进行选项卡，则悬停不会做任何事情，但焦点会。

.control .price:focus {
  background: #a3a3a3;
}