Grow your CSS skills. Land your dream job.

:hover state affect a non-child item

  • # December 12, 2012 at 1:18 pm

    Hey guys.

    Is there a way that I can get a :hover state to affect an item that isn’t a direct child of itself.

    So say for example you had this code.

    Hover on me

    Is there a way using css that I can use a.link:hover to trigger something on the span.box even thought the span.box isn’t inside the a.link.

    Cheers everyone

    # December 12, 2012 at 1:22 pm

    I know that it should be a div and not a span but when i put div in this post it won’t display properly and only shows the a link

    # December 12, 2012 at 1:35 pm

    In your specific example you could use a sibling selector:

    .link:hover + .box {
    /* your styles */
    }

    # December 12, 2012 at 1:36 pm

    @TheDoc Nice cheers. i’m guessing this won’t work if the affected item is outside of a wrapper element?

    or to explain myself better they both need to be a child of the same parent element

    # December 12, 2012 at 2:00 pm

    Like this http://www.visibilityinherit.com/code/css-content-swap.php

    # December 12, 2012 at 6:44 pm

    I think like TheDoc

    a.link + span.box {
    /* styling */
    }

    Hope it’s helpful to you

    # December 12, 2012 at 7:12 pm

    @Blackhawkso Yes, for the sibling selector to work, both elements need to have the same parent, and they need to be in that source order.

    # December 12, 2012 at 7:34 pm

    Sorry I missed your messaged. Josh hit the nail on the head. That’s why I said “in your specific example” because I wasn’t sure if you were making a basic example of something more complicated that you were trying to do.

    # December 13, 2012 at 11:53 am

    Right ok got it cheers everyone

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".