The CSS Community's Thoughts On Hover Parenting

A person recently shared a style guide post to a large online design community. The short article is about using the :not CSS selector in order to stylize a sibling on hover. According to the author of the article, a designer would typically need to use JavaScript in order to stylize all of the siblings of an element that with which they want to interact. However, there may be a better way to do it, with only CSS.

In short, the idea is to target the :hover of the parent. The next step is to target all the children except the one over which the user is hovering. The code for this would be: .parent:hover .child:not(:hover). The style affects all of the children except the one that the user hovers above with their cursor.

The person who posted this wanted to know what other designers thought about it. One person took a look and added comments about trying the code on Code Pen, and it did not work. They noted that the section for the parent hover triggered a color change, but the section for the child hover did not do anything at all.

Another person said that this bit of code is not a perfect solution. When there is a gap between the items, all of the items are affected by the styling. One person suggested that the coder who could not get the code to work on Code Pen try getting rid of the gap and padding the children. A few people wondered how that could be an issue.

Someone else said they used the parent's hover to style the child. The code they used was this: .parent :hover .child; .child :hover. The person said to maintain that order so that only the hovered child would not get overridden by the style for all the children. Somebody tried that and said it didn't work. They said it turned all the child divisions red, but the child on hover did not turn blue. The person did use the code from the article, and it worked well. For more information click here https://codyhouse.co/nuggets/styling-siblings-on-hover.