:hover state affect a non-child item

[Blackhawkso]

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

[Blackhawkso]

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

[TheDoc]

In your specific example you could use a sibling selector:

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

[Blackhawkso]

@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

[TheDoc]

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.

[Blackhawkso]

Right ok got it cheers everyone

[Author]

Posts