将鼠标悬停在子节点上时撤消父级的悬停效果

Question

所以我有一个div并在div里面另一个div（检查图像）

现在我想要的是当你将鼠标悬停在蓝色div上时应该有一个效果，就像它改变颜色一样，但是当你将鼠标悬停在红色div上时，蓝色div应该回到它的初始颜色而红色div应该有悬停效果。 我就是这样的（HTML）：

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

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

当你将鼠标悬停在红色div上时，蓝色的悬停效果仍然有效，这不是我想要的。