~ "Safari adjacent sibling bug fix" - problem in Google Chrome ~

HTML & CSS
1

Hi there peeps,

The “Safari adjacent sibling bug fix”…

[color=navy]body {
    -webkit-animation: bugfix infinite 1s;
 }
@-webkit-keyframes bugfix {
    from { padding: 0; } to { padding: 0; }
 }
[/color]

…is not not working in Chrome, in conjunction with the “pseudo hover class”. :eek:

If you look at my example here…

…you will see that the hover effect only works with the thumbnail on the far right, in that browser.

So basically…

[color=navy]
element:hover+element { }
[/color]

…works as expected, but…

[color=navy]
element:hover+element+element { }
[/color]

…sadly fails. :frowning:

coothead

2

If it’s just a matter of getting the gallery working, it’s not hard to do that with simpler CSS, as in these examples:

http://www.visibilityinherit.com/code/the-jamieruth2-example.php

http://css-tricks.com/examples/CSSImageSwitcher/

http://www.pmob.co.uk/temp/gallery-rollover.htm

3

Hi there ralph.m,

thanks for your kind reply. :wink:

Obviously, the use of different CSS methods will work, but I was looking for a method that would resolve Chrome’s…

adjacent sibling bug in conjunction with the “pseudo hover class”

coothead

4

Hi there peeps,

changing the “adjacent sibling selector" to the "[url=http://reference.sitepoint.com/css/generalsiblingselector]general sibling selector” resolves the problem. :wink:

So this…

[color=navy]
#b:hover+#c+#d+#e+#a {}
[/color]

…simply becomes…

[color=navy]
#b:hover~#a {}
[/color]

Also the “Safari adjacent sibling bug fix”…

[color=navy]body {
    -webkit-animation: bugfix infinite 1s; 
 }
@-webkit-keyframes bugfix {
    from { padding: 0; } to { padding: 0; } 
 }
[/color]

…is now redundant and Google Chrome is a happy bunny again. :smiley:

coothead