How Can I Style a Child Element When Its Parent is Hovered?

Styling Child Elements on Parent Hover

Need to modify a child element's appearance when hovering over its parent? Enter CSS's mighty :hover selector.

To do this:

.parent:hover .child {
  /* Styling for the child element when the parent is hovered */
}

With this selector, you're targeting the child element when the parent, ".parent," is hovered. The descendant combinator (space) selects descendants matching ".child."

For instance:

.parent:hover .child {
  background-color: #ccc;
}

This turns the child element's background gray when hovering over the parent.

Live example:

<div class="parent">
  <p class="child">Hover me</p>
</div>

.parent {
  border: 1px dashed gray;
  padding: 1em;
  display: inline-block;
}

.child {
  background-color: white;
  padding: 0.5em;
  transition: all 0.5s;
}

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

This example changes the child element's background to gray and slightly scales it up on parent hover.

Remember, your browser support is covered here. Dive into CSS and enhance your user experience!

The above is the detailed content of How Can I Style a Child Element When Its Parent is Hovered?. For more information, please follow other related articles on the PHP Chinese website!