Why Doesn\'t :hover Work Properly with Adjacent-Sibling Selectors in Webkit Browsers?-CSS Tutorial-php.cn

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

Linda Hamilton

Release： 2024-10-24 02:42:29

Original

995 people have browsed it

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 {}

Copy after login

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 {}

Copy after login

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;
  }
}

Copy after login

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!

source：php

Previous article：How to Fix Divs Appearing Out of Order Despite Correct z-Index Usage? Next article：How Do You Reverse the Direction of Text in CSS?

Statement of this Website

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