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!