Наведение на дочернего элемента должно отключить эффект наведения на родителя. ⇐ CSS

[Anonymous]

У меня есть два вложенных

Код: Выделить всё

Я хочу изменить фон с .parent при наведении курсора на .parent.
Я хочу, чтобы фон снова стал нормальным, когда я наводил курсор на .child.
Например, когда я навожу курсор на внутреннюю область, я хочу, чтобы внешняя область вернуться в исходное (серое) состояние:

Код: Выделить всё

.parent {
width: 100px;
height: 100px;
padding: 50px;
background: lightgray;
}

.parent:hover {
background: lightblue;
}

.child {
height: 100px;
width: 100px;
background: darkgray;
}

.child:hover {
background: lightblue;
}

Код: Выделить всё

Я хотел бы сохранить эту структуру и Мне не нужно решение на JavaScript (я знаю решение на JavaScript, но хочу оставить его на чистом CSS).
Это не дубликат статьи «Как стилизовать родительский элемент при наведении курсора на ребенок". Я НЕ хочу стилизовать родительский элемент при наведении курсора на дочерний элемент.

Подробнее здесь: https://stackoverflow.com/questions/179 ... -on-parent