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.