Change Background Color of Parent Container on Child Hover (CSS Only)

While the question about selecting parent elements with CSS is often marked as a duplicate, it overlooks the need for practical solutions. In particular, the issue of changing the background color of a parent container when hovering over its child can be addressed through a CSS-only approach.

Pointer-Events and Hover:

To achieve this effect, we can manipulate pointer events and the :hover pseudo-class:

1. Set pointer-events: none on the parent. This prevents the parent element from receiving any hover events.
2. Define the desired parent background color change on hover.
3. Set pointer-events: auto on the child. This allows the child element to trigger hover events, even though the parent ignores them.

Example:

div {
  height: 200px;
  width: 200px;
  text-align: center;
  pointer-events: none;
}
div:hover {
  background: #F00;
}
div > a {
  pointer-events: auto;
}

  Anchor Text

This solution effectively captures the hover event on the child element, allowing the parent container's background to change when the child is hovered, all without using JavaScript.