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.
<a href="#" class="link">Hover on me</a> <span class="box"></span>
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
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
In your specific example you could use a sibling selector:
.link:hover + .box { /* your styles */ }
@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
Like this http://www.visibilityinherit.com/code/css-content-swap.php
I think like TheDoc
a.link + span.box { /* styling */ }
Hope it's helpful to you
@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.
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.
Right ok got it cheers everyone
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.
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
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
In your specific example you could use a sibling selector:
@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
Like this http://www.visibilityinherit.com/code/css-content-swap.php
I think like TheDoc
Hope it's helpful to you
@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.
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.
Right ok got it cheers everyone