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团队的工程师。

首先，这是真正酷的发现。你偶然发现的是一个＆＃34;功能＆＃34; （很可能是一个bug）Internet Explorer似乎不存在于Chrome或Firefox中。让我试着打破对正在发生的事情的理解，为什么这很酷，以及你可以做些什么来避免它的复杂化：

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

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

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

enter image description here

请注意，这种关系是双向的，这意味着input上的任何悬停都不仅仅是悬停在自身及其祖先树上，而是悬停在其关联的label上。任何悬停在label上的都是悬停在它自己，它的祖先树及其相关的input上。这使我们更接近了解您演示中的内容，以及为什么您会看到这些奇怪的结果。

当您悬停元素时，您也会覆盖其父元素。例如，假设我们内部有div button。任何悬停在button上的内容都固有地悬停在父div上。就光标而言，如果没有先通过父母，就无法找到孩子。同样的规则适用于此;当标签或输入悬停时，其父母也是如此。

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

后续建议

虽然[for]属性允许您将label元素放置在任何位置，但您应该继续这样做，只有特别了解这将如何影响:hover传播之外的选择器祖先的树。

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

从此处跟进

我打算在我们的内部数据库中打开一个针对此问题的错误，因为我觉得这并不是我们完全有意的。我相信，我们的目标是将行为视为双向行为，而不是以不同方式处理这两种行为。

Answer 2

我建议使用：focus而不是：在处理表单输入时悬停。其中一个原因是因为如果用户使用键盘进行选项卡，则悬停不会做任何事情，但重点是。

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

标签：hover属性触发IE10和IE11中的错误元素

2 个答案: