Question

该示例有1个CSS选择器，它与兄弟选择器相邻：

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

问题是徘徊在页面上的任何元素上使得Internet Explorer（在Win 8.1上最新的11个）重新计算太多样式。要重现，请转到示例页面，然后在白色结果区域中移动鼠标。您可以绘制圆圈或只是垂直移动鼠标，您不必触摸字母。这使得IE占据100％的单CPU核心;在这个例子中，Firefox和Chrome的CPU负载实际上是0。

如果示例看起来很合适，请尝试在CPU速度快的情况下将元素数量加倍，或者添加此CSS以显示慢速样式更新：

div:hover { background: gray }

解决问题的方法：

删除：悬停

无法解决问题的事情：

切换到通用兄弟选择器（〜）

这有什么变通方法吗？我正在考虑一些全局的javascript，它们会为悬停的元素添加类。

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选择器替换为您需要的内容。

Internet Explorer的兄弟选择器非常慢：悬停

1 个答案: