Why Doesn\'t :hover Work Properly with Adjacent-Sibling Selectors in Webkit Browsers?

Webkit Bug with Multiple Adjacent-Sibling Selectors

In Webkit browsers (Safari, Chrome), an issue arises when utilizing the :hover pseudo-class with multiple adjacent-sibling selectors. The following code illustrates the problem:

div:hover + a + div {}

When hovering over the

element, the style is not applied correctly. However, if you hover over the first and then the

, the style is applied as expected.

Adding a general sibling selector, such as:

div:hover ~ div {}

regardless of whether a style is declared, resolves the issue.

A workaround for this Webkit bug is to fake animation on the body element:

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

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

  to {
    padding: 0;
  }
}

This can be seen in action here: https://jsfiddle.net/jalbertbowdenii/ds2yY/1/.

The above is the detailed content of Why Doesn\'t :hover Work Properly with Adjacent-Sibling Selectors in Webkit Browsers?. For more information, please follow other related articles on the PHP Chinese website!