How to prevent a parent from hanging in CSS

Question

I have code that requires the same hover effect on every div. However, when the mouse hangs over the child, I do not want the effect to remain with the parent. I understand why this happens - because when you hover over a parent or child, the mouse is still above the parent!

This example shows the problem well.

div {
  background: blue;
  min-width: 500px;
  min-height: 90px;
  margin: 40px;
  color:white;
  border: solid 2px white;
}

div:hover {
  background: green;
}

<div>
hover here and it is green. This is great.
    <div>
    hover here and I'd like there to be a blue parent and this should remain as the green child
    </div>
</div>

Run codeHide result

https://jsfiddle.net/5k0gaq37/8/

I want the hover effect to no longer affect the parent when hovering over the child div. HTML should remain as it is (although I can add another css class for any div, etc.), just like existing CSS. Parent CSS can be of any style.

, , , , , , .