标签: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 团队的一名工程师。

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

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

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

这就是事情变得很酷的地方。这使我们能够创建如下所示的关系：

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

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

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

后续建议

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

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

从这里跟进

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