SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot coothead's Avatar
    Join Date
    Jan 2005
    Location
    Chertsey, London, England
    Posts
    164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    Hi there peeps,

    The "Safari adjacent sibling bug fix"...
    Code:
    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...

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

    So basically...
    Code:
    
    element:hover+element { }
    
    ...works as expected, but...
    Code:
    
    element:hover+element+element { }
    
    ...sadly fails.


    coothead

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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

  3. #3
    SitePoint Zealot coothead's Avatar
    Join Date
    Jan 2005
    Location
    Chertsey, London, England
    Posts
    164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    SitePoint Zealot coothead's Avatar
    Join Date
    Jan 2005
    Location
    Chertsey, London, England
    Posts
    164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there peeps,

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

    So this...
    Code:
    
    #b:hover+#c+#d+#e+#a {}
    
    ...simply becomes...
    Code:
    
    #b:hover~#a {}
    
    Also the "Safari adjacent sibling bug fix"...
    Code:
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •