Hover on child should turn off hover effect on parent

Question

I have two nested <div>'s

<div class="parent">
    <div class="child"></div>
</div>

I want to change the background from .parent when I hover over .parent.

I want the background to turn normal again when I hover over .child.

For example, when I hover over the inner area I want the outer area to return to its original (gray) state:

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

.parent:hover {
    background: lightblue;
}

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

.child:hover {
    background: lightblue;
}

<div class="parent">
    <div class="child"></div>
</div>

I would like to keep this <div> structure and I do not want a JavaScript solution (I know the JavaScript solution but I want to keep it pure CSS).

This is not a duplicate of "how to style the parent when hovering over a child". I want to NOT style the parent when hovering over a child.

Answer 1

EDIT 2024: It's now possible with the newly added has selector https://developer.mozilla.org/en-US/docs/Web/CSS/:has

https://stackoverflow.com/a/78110861/270209

---

Old Answer:

Basically you can't : How to style the parent element when hovering a child element?

But a trick is to use a sibling element : http://jsfiddle.net/k3Zdt/8/

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

.child {
  height: 100px;
  width: 100px;
  background: #355E95;
  transition: background-color 1s;
  position: relative;
  top: -200px;
}

.child:hover {
  background: #000;
}

.sibling {
  position: relative;
  width: 100px;
  height: 100px;
  padding: 50px;
  top: -50px;
  left: -50px;
  background: #3D6AA2;
  transition: background-color 1s;    
}

.sibling:hover {
  background: #FFF;
}

<div class="parent">
    <div class="sibling"></div>
    <div class="child"></div>
</div>