Alterar a cor de fundo do contêiner pai ao passar o mouse sobre o filho (apenas CSS)

Embora a questão sobre a seleção de elementos pai com CSS seja frequentemente marcada como duplicado, ignora a necessidade de soluções práticas. Em particular, o problema de alterar a cor de fundo de um contêiner pai ao passar o mouse sobre seu filho pode ser resolvido por meio de uma abordagem somente CSS.

Eventos de ponteiro e foco:

Para conseguir esse efeito, podemos manipular eventos de ponteiro e a pseudoclasse :hover:

1. Set pointer-events: none no pai. Isso evita que o elemento pai receba quaisquer eventos de foco.
2. Defina a mudança de cor de fundo pai desejada ao passar o mouse.
3. Definir ponteiro- events: auto no filho. Isso permite que o elemento filho acione eventos de foco, mesmo que o pai ignore eles.

Exemplo:

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

  Anchor Text

Esta solução captura efetivamente o evento de foco no elemento filho, permitindo que o plano de fundo do contêiner pai mude quando o filho é passado, tudo sem usar JavaScript.