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

[coothead]

Hi there peeps,

The "Safari adjacent sibling bug fix"...

body {
    -webkit-animation: bugfix infinite 1s; 
 }
@-webkit-keyframes bugfix {
    from { padding: 0; } to { padding: 0; } 
 }

...is not not working in Chrome, in conjunction with the "pseudo hover class".

If you look at my example here...

• http://www.coothead.co.uk/css-img-swap.html

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

So basically...

element:hover+element { }

...works as expected, but...

element:hover+element+element { }

...sadly fails.


coothead

[ralph.m]

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/cod...h2-example.php

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

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

[coothead]

Hi there ralph.m,

thanks for your kind reply.

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

[coothead]

Hi there peeps,

changing the "adjacent sibling selector" to the "general sibling selector" resolves the problem.

So this...

#b:hover+#c+#d+#e+#a {}

...simply becomes...

#b:hover~#a {}

Also the "Safari adjacent sibling bug fix"...

body {
    -webkit-animation: bugfix infinite 1s; 
 }
@-webkit-keyframes bugfix {
    from { padding: 0; } to { padding: 0; } 
 }

...is now redundant and Google Chrome is a happy bunny again.

coothead