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

Question

Example page: http://jsfiddle.net/y2pwqch6/6/

The example has 1 CSS selector, which is adjacent sibling selector:

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

The problem is hovering over any element on the page makes Internet Explorer (up to the latest 11 on Win 8.1) recompute too many styles. To reproduce, head over to the example page, and move your mouse in the white results area. You can draw circles or just move the mouse vertically, you don't have to touch letters. This makes IE occupy a single CPU core for 100%; the CPU load for Firefox and Chrome in this example is literally 0.

If the example looks fine for you, try doubling the amount of elements in case your CPU is fast, or add this CSS to will visualize the slow style updates:

div:hover { background: gray }

Things that fix the problem:

• Removing :hover

Things that don't fix the problem:

• Switching to general sibling selector (~)

Any workarounds for this? I'm thinking of some global javascript that will add classes to hovered elements.

Answer 1

Workaround using javascript:

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

Replace :hover with .GlobalHovered , and the .l selector with what you need.