Why Does WebKit Fail to Apply :hover Styles on Multiple Adjacent-Sibling Elements?

WebKit Issue: Hover Pseudo-Class with Multiple Adjacent-Sibling Selectors

Web browsers commonly encounter challenges handling the :hover pseudo-class in conjunction with adjacent-sibling selectors. In particular, WebKit (Safari and Chrome) faces difficulties when applying :hover styles to a series of adjacent sibling elements.

Challenge:

The following example demonstrates the issue:

div:hover + a + div { /* styles here */ }

In this case, WebKit fails to apply the styles to the second div when the mouse hovers over it directly. However, if the mouse hovers over the preceding anchor element first and then hovers over the second div, the styles are applied as expected.

Solution:

A workaround for this bug involves faking animation on the body element:

body { -webkit-animation: bugfix infinite 1s; }

@-webkit-keyframes bugfix {
  from { padding: 0; }
  to { padding: 0; }
}

This solution introduces a trivial animation that forces WebKit to re-render the body element, thus resolving the issue with hover pseudo-classes and multiple adjacent-sibling selectors.

The above is the detailed content of Why Does WebKit Fail to Apply :hover Styles on Multiple Adjacent-Sibling Elements?. For more information, please follow other related articles on the PHP Chinese website!