Why Do :hover and Multiple Adjacent-Sibling Selectors Cause Bugs in Safari and Chrome?

Safari and Chrome Bug with :hover and Multiple Adjacent-Sibling Selectors

In web development, using the :hover pseudo-class and adjacent-sibling selectors is generally supported by major browsers such as Safari, Chrome, Opera, and Firefox. For example, the following code works as intended:

a:hover + div {}

However, when multiple adjacent-sibling selectors are added, Webkit browsers (including Safari and Chrome) exhibit unexpected behavior:

div:hover + a + div {}

In such cases, Webkit fails to apply the style as expected.

A workaround to address this bug is to use a style declaration on the body element to create a subtle animation effect:

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

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

This animation has no visible effect but triggers a style recalculation, allowing Webkit browsers to correctly apply the :hover and adjacent-sibling selector styles.

Here's an example to demonstrate the workaround: http://jsfiddle.net/jalbertbowdenii/ds2yY/1/.

By employing this technique, you can overcome the Webkit bugs and ensure consistent behavior across different browsers.

The above is the detailed content of Why Do :hover and Multiple Adjacent-Sibling Selectors Cause Bugs in Safari and Chrome?. For more information, please follow other related articles on the PHP Chinese website!