Internet Explorer的同级选择器在:hover状态下非常缓慢

Question

示例页面：http://jsfiddle.net/y2pwqch6/6/

这个例子有一个CSS选择器，就是相邻兄弟选择器：

.l:hover + .r {
    color: blue
}

问题是在页面上悬停在任何元素上都会导致Internet Explorer（Win 8.1上的最新版本11）重新计算太多的样式。要重现，请转到示例页面，然后将鼠标移动到白色结果区域中。您可以画圆或仅向垂直移动鼠标，无需触摸字母。这使IE占用单个CPU核心达到100％;在此示例中，Firefox和Chrome的CPU负载实际上为0。

如果示例看起来很好，请尝试将元素数量加倍（如果您的CPU速度较快），或添加此CSS以可视化缓慢的样式更新：

div:hover { background: gray }

解决问题的方法：

- 删除:hover - 切换到一般兄弟选择器(~)

有没有解决方法？我正在考虑一些全局JavaScript，它将向悬停的元素添加类。

- a553

Answer 1

使用JavaScript的解决方法：

;((() => {
    const selector = '.l';
    $('body').delegate(selector, 'mouseover', e => {
        $(e.target).addClass('GlobalHovered');
    });
    $('body').delegate(selector, 'mouseout', e => {
        $(e.target).removeClass('GlobalHovered');
    });
})());

将:hover替换为.GlobalHovered，并将.l选择器替换为您需要的内容。

- a553