Normally, you would need JavaScript to stylize all the siblings of an element you're interacting with. But wait! There's a cool method based 100% on CSS.
The idea, in short, is to target the :hover of the parent, then target all the children except the one you're hovering over.
.parent:hover .child:not(:hover) {
/* this style affects all the children except the one you're hovering over */
}
Here's an example:
Originally published at CodyHouse.co
Top comments (5)
This is so great! I am trying to apply a CSS color change on the siblings of a list of links under the following format:
The goal being to have all the links in black and when hovering, the one being overed remains black while the rest changes to lightgray.
I unfortunately haven't been able to apply the desired effect with the following CSS:
Any clue what I'm missing?
TO: Sebastiano Guerriero(@guerriero_se) Great article. Great solution. Very clear. Thank you!
RE: Cedric Garcia(@discopigeon) Cedric, you are missing:
(1) The letter "s" in .list-items in your style.
(2) Also, you need to do the hover on the parent .list-items, not on the < a> like this:
Also, here is another way to do the same with a different starting color (: red):
This is great for menu on header and footer.
indeed it is :)
Thanks a lot, really nice solution.
Some comments may only be visible to logged-in visitors. Sign in to view all comments.