Cambiar el color de fondo del contenedor principal al pasar el cursor sobre el elemento secundario (solo CSS)

Si bien la pregunta sobre la selección de elementos principales con CSS a menudo se marca como un duplicado, pasa por alto la necesidad de soluciones prácticas. En particular, el problema de cambiar el color de fondo de un contenedor principal al pasar el cursor sobre su hijo se puede solucionar mediante un enfoque exclusivo de CSS.

Eventos de puntero y desplazamiento:

Para lograr este efecto, podemos manipular eventos de puntero y la pseudoclase :hover:

1. Establecer eventos de puntero: ninguno en el parent. Esto evita que el elemento principal reciba eventos de desplazamiento.
2. Defina el cambio de color de fondo principal deseado al pasar el mouse.
3. Establecer puntero- eventos: automático en el elemento secundario. Esto permite que el elemento secundario active eventos de desplazamiento, aunque el elemento principal ignore ellos.

Ejemplo:

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

  Anchor Text

Esta solución captura eficazmente el evento de desplazamiento del elemento secundario, lo que permite que el fondo del contenedor principal cambie cuando se desplaza el elemento secundario, todo sin usar JavaScript.