css - 标签 :hover attribute triggers incorrect element in IE10 and 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 团队的一名工程师。

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

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

在相关说明中，当您将鼠标悬停在标签上时，相关联的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 上的悬停。就游标而言，如果不先通过 parent ，就无法到达 child 。同样的规则适用于此；当一个标签或输入被悬停时，它的 parent 也是如此。

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

后续建议

虽然 [for] 属性允许您将 label 元素放置在任何地方，但您应该仅在特别注意这将如何影响选择器操作的情况下继续这样做:hover 沿祖先树向上传播。

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

从这里跟进

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