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

Webkit Bug with :hover and Multiple Adjacent-Sibling Selectors

In browsers such as Safari and Chrome, the :hover pseudo-class works correctly with adjacent-sibling selectors, such as a:hover div. However, a bug arises when multiple adjacent-sibling selectors are used, as in div:hover a div.

The Problem

In Webkit browsers, the div:hover a div selector malfunctioned, failing to apply styling to the

element as expected. Paradoxically, adding a sibling combinator, such as div:hover ~ div, with or without styling, inexplicably resolved the issue.

Solution

To circumvent this Webkit bug, you can employ a technique involving animation on the body element. By attaching an animated CSS class to the body element with an empty animation, you can effectively trick the browser into resolving the bug:

<code class="css">body {
  -webkit-animation: bugfix infinite 1s;
}

@-webkit-keyframes bugfix {
  from {
    padding: 0;
  }
  to {
    padding: 0;
  }
}</code>

This solution works by triggering a re-render of the page, which forces Webkit to resolve the sibling selectors correctly. You can view an example of this workaround in action on JS Fiddle: http://jsfiddle.net/jalbertbowdenii/ds2yY/1/.

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