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

• Summary of what you must pay attention to about Border when writing CSS
• How to realize multi-style selection and real-time switching of styles_Experience exchange
• Detailed usage analysis of marquee
• CSS标题线（删除线贯穿线效果）实现
• CSS3中优雅降级和渐进增强的区别