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!

chrome safari webkit if for class this animation https bug issue

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to Fix Divs Appearing Out of Order Despite Correct z-Index Usage?Next article：How to Fix Divs Appearing Out of Order Despite Correct z-Index Usage?

Related articles

See more

• How to Achieve Dynamic Text Resizing for Optimal Readability in Responsive Web Design?
• How to Achieve Smooth 3D Card Flipping with Pure CSS: Troubleshooting Snapping Issues
• Why Doesn\'t div1 Appear Above div2 Despite Higher z-index?
• The HTML I Wish I Had
• How to Fix Divs Appearing Out of Order Despite Correct z-Index Usage?