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 (3)
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.