Webkit bugHover and Sibling Selector

Marcofolio.net

This is an example page that shows the weird behavior/bug in -webkit browsers when combining the generic sibling selector (~) with the hover pseudo-attribute (:hover). The first example shows the bug, while the second and third show two different solutions.

Take note the bug only occurs in Webkit browsers: Chrome and Safari. The example works fine in other browsers, like Firefox, Opera and - yes - even Internet Explorer.

Sibling selector and :hover bug

This is my target text. The color should change based on the :hover of my previous elements (the colors).

This example does not work in -webkit browsers (the described bug).

Solution using nested HTML and different CSS

This is my target text. The color should change based on the :hover of my parent elements (the colors).

This example does work in -webkit browsers, but not preferred (ugly).

Solution using jQuery

This is my target text. The color should change based on the :hover of my previous elements (the colors).

This example uses jQuery to keep the same HTML, but make it work in -webkit browsers.