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!

source：php

Previous article：Do CSS Selector Engines Read from Left to Right or Right to Left? Next article：How to Fix Div Overlap Issues with z-index?

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

Latest Articles by Author

• How Can I Efficiently Detect and Display Duplicate Values and Their Counts in a PHP Array?
  2024-12-01 00:21:11
• How Can I Keep My Go Goroutines Running Even After a Panic?
  2024-12-01 00:20:13
• Why am I getting a \'Column count doesn\'t match value count at row 1\' error in my MySQL INSERT statement?
  2024-12-01 00:19:11
• Why is my Python code throwing a \'TypeError: \'module\' object is not callable\' when creating a socket?
  2024-12-01 00:18:11
• Execa vs using child_process to execute CLI commands programmatically.
  2024-12-01 00:17:12
• How Do I Properly Insert PHP Variables into Echoed Strings?
  2024-12-01 00:16:17
• How Does Spring Data JPA Dynamically Implement Repository Interfaces?
  2024-12-01 00:15:12
• How to Allow NULL Values in MySQL Columns?
  2024-12-01 00:14:15
• How to Fix the \'x509: Certificate Signed by Unknown Authority\' Error in AWS SES?
  2024-12-01 00:13:11
• Motherboard Stuck on DRAM Light: Complete Guide Here
  2024-12-01 00:12:10

Latest Issues

function_exists() cannot determine the custom function Function test () {return true;} if (function_exists ('test')) {echo "test is function...

From 2024-04-29 11:01:01

0

3

2049

How to display the mobile version of Google Chrome Hello teacher, how can I change Google Chrome into a mobile version?

From 2024-04-23 00:22:19

0

11

2204

The child window operates the parent window, but the output does not respond. The first two sentences are executable, but the last sentence cannot be implemented.

From 2024-04-19 15:37:47

0

1

1862

There is no output in the parent window document.onclick = function(){ window.opener.document.write('I am the output of the child ...

From 2024-04-18 23:52:34

0

1

1749

Where is the courseware about CSS mind mapping? Courseware

From 2024-04-16 10:10:18

0

0

1771

Related Topics

More>

• What is the return value of the function
• special symbol point
• Common encryption methods for data encryption storage
• Introduction to commands for creating new files in Linux
• Today's latest official news of PaiCoin is true
• bios cannot detect solid state drive
• location.search
• Excel table slash divided into two