Sample page: http://jsfiddle.net/y2pwqch6/6/
This particular example showcases a CSS selector known as the adjacent sibling selector:
.l:hover + .r {
color: blue
}
The issue arises when hovering over any element on the page, causing Internet Explorer (up to version 11 on Windows 8.1) to recalculate an excessive amount of styles. To replicate this problem, navigate to the provided example page and move your mouse within the white results area. This can be done by drawing circles or simply moving the mouse vertically without touching any letters. As a result, IE will utilize a single CPU core at 100% capacity; meanwhile, Firefox and Chrome exhibit minimal CPU load in the scenario.
If you do not experience any issues with the example, consider increasing the number of elements on the page for testing purposes or applying the following CSS code to visualize the slow style updates:
div:hover { background: gray }
Potential solutions to address the problem:
- Removing the :hover effect
Actions that do not resolve the issue:
- Switching to the general sibling selector (~)
Are there any workarounds available for this situation? One option could involve implementing a JavaScript script that applies classes to hovered elements globally.