Undo hover effect of parent when hovering over child

Question

So I have a div and inside that div another div (check the image)

Now what I want is when you hover over the blue div there should be an effect, like it changes its colour but when you hover over the red div, the blue div should go back to its initial colour and the red div should have a hover effect. This is how I have it (HTML):

#wrapper:hover {
  background-color: red;
}
#link:hover {
  background-color: green;
}

<div id="wrapper">
  wrapper
  <div id="link">
    link
  </div>
</div>

When you hover over the red div, the blue one's hover effect is still active, which is not what I want.