How to Resolve the :hover and Adjacent-Sibling Selectors Webkit Bug?

Understanding and Resolving Webkit Bug with :hover and Adjacent-Sibling Selectors

In Webkit browsers (e.g., Chrome, Safari), a bug arises when using the :hover pseudo-class alongside multiple adjacent-sibling selectors. Specifically, the hover effect won't be applied as expected when a third adjacent-sibling is introduced.

For example:

a:hover + div {}

This code works flawlessly. However, adding another adjacent-sibling selector:

div:hover + a + div {}

Breaks the intended behavior in Webkit browsers.

Curiously, if you hover over the anchor element first and then the div element, the style is applied correctly. Additionally, including the adjacent ~ sibling selector resolves the issue, even if no style is declared:

div:hover ~ div {}

To address this bug, you can implement a workaround by simulating animation on the body element:

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

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

By triggering an empty animation on the body, you can effectively bypass the bug. You can verify the solution at this JSFiddle: http://jsfiddle.net/jalbertbowdenii/ds2yY/1/

The above is the detailed content of How to Resolve the :hover and Adjacent-Sibling Selectors Webkit Bug?. For more information, please follow other related articles on the PHP Chinese website!