How to Style Child Elements on Parent Hover Using CSS?

Hover Effect on Child Element Using CSS

To modify the style of a child element when its parent element is hovered over, you can employ the following CSS technique:

.parent:hover .child {}

This CSS rule utilizes the :hover pseudoclass to target the parent element (".parent") in a hovered state. The descendant combinator (space) within the rule selects any descendant element that matches the ".child" class.

By applying this rule, you can alter the properties of the child element based on the hover status of the parent element. For instance, the following code snippet changes the background color of the ".child" element and scales it up when its ".parent" element is hovered over:

.parent:hover .child {
   background-color: #cef;
   transform: scale(1.5);
}

This approach offers cross-browser compatibility and effectively allows you to style child elements based on the interactions with their parent elements.

The above is the detailed content of How to Style Child Elements on Parent Hover Using CSS?. For more information, please follow other related articles on the PHP Chinese website!