如何实现div改变其他div背景的一致性？

Question

我有两个div，＃left和#right。当我将鼠标悬停在#left上时，我希望#right的内容发生变化，反之亦然。悬停后，内容将恢复为悬停前的状态。

目前，将鼠标悬停在#left上会改变#right的背景，但完全相同的代码无效。反之亦然。

#left:hover+#right {
  background-image: url('working image url');
}

#right:hover+#left {
  background-image: url('working image url');
}

#left:hover:after,
#right:hover:after {
  content: '';
}

<div id="left">Content</div>
<div id="right">Content</div>